fix: use html entity for branding separation dash

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/components/common/custom-branding/custom-branding.tsx

@@ -3,8 +3,8 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { useFrontendConfig } from '../frontend-config-context/use-frontend-config'
 import styles from './branding.module.scss'
+import { useBrandingDetails } from './use-branding-details'
 import React from 'react'
 
 export interface BrandingProps {
@@ -19,9 +19,9 @@ export interface BrandingProps {
  * @param delimiter If the delimiter between the HedgeDoc logo and the branding should be shown.
  */
 export const CustomBranding: React.FC<BrandingProps> = ({ inline = false }) => {
-  const branding = useFrontendConfig().branding
+  const branding = useBrandingDetails()
 
-  if (!branding.name && !branding.logo) {
+  if (!branding) {
     return null
   } else if (branding.logo) {
     return (

frontend/src/components/common/custom-branding/use-branding-details.ts

@@ -0,0 +1,21 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import type { BrandingConfig } from '../../../api/config/types'
+import { useFrontendConfig } from '../frontend-config-context/use-frontend-config'
+import { useMemo } from 'react'
+
+/**
+ * Extracts the branding from the config.
+ *
+ * @return the branding configuration or null if no branding has been configured
+ */
+export const useBrandingDetails = (): null | BrandingConfig => {
+  const branding = useFrontendConfig().branding
+
+  return useMemo(() => {
+    return !branding.name && !branding.logo ? null : branding
+  }, [branding])
+}

frontend/src/components/editor-page/app-bar/branding-separator-dash.tsx

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useBrandingDetails } from '../../common/custom-branding/use-branding-details'
+import React from 'react'
+
+/**
+ * Renders a long dash if branding is configured.
+ */
+export const BrandingSeparatorDash: React.FC = () => {
+  const branding = useBrandingDetails()
+
+  return !branding ? null : <span className={'mx-1'}>&mdash;</span>
+}

frontend/src/components/editor-page/app-bar/branding.module.scss

@@ -1,13 +0,0 @@
-/*!
- * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-.branding-separator:has(*) {
-  &::before {
-    content: '\2014';
-    margin-left: 0.25em;
-    margin-right: 0.25em;
-  }
-}

frontend/src/components/editor-page/app-bar/navbar-branding.tsx

@@ -10,7 +10,7 @@ import {
   HedgeDocLogoType,
   HedgeDocLogoWithText
 } from '../../common/hedge-doc-logo/hedge-doc-logo-with-text'
-import styles from './branding.module.scss'
+import { BrandingSeparatorDash } from './branding-separator-dash'
 import Link from 'next/link'
 import React from 'react'
 import { Navbar } from 'react-bootstrap'
@@ -28,9 +28,8 @@ export const NavbarBranding: React.FC = () => {
           logoType={darkModeActivated ? HedgeDocLogoType.WB_HORIZONTAL : HedgeDocLogoType.BW_HORIZONTAL}
           size={HedgeDocLogoSize.SMALL}
         />
-        <span className={styles['branding-separator']}>
+        <BrandingSeparatorDash />
         <CustomBranding inline={true} />
-        </span>
       </Link>
     </Navbar.Brand>
   )