🐛(frontend) fix css title issue

Recent changes broke the way the titles were displayed
when a emoji was present. It was displayed on 2
lines instead of a single line.
We fixed the CSS to ensure that titles with emojis
are displayed on a single line.
We improved the way the underline is displayed with
interlinking blocks.

src/frontend/apps/impress/src/features/docs/doc-editor/components/custom-inline-content/Interlinking/LinkSelected.tsx

@@ -132,25 +132,14 @@ export const LinkSelected = ({
         $position="relative"
         $css={css`
           margin-left: 2px;
+          text-decoration: underline;
+          text-decoration-color: var(
+            --c--contextuals--border--semantic--neutral--tertiary
+          );
+          text-underline-offset: 0.2em;
         `}
       >
-        <Box
-          className="--docs-interlinking-underline"
-          as="span"
-          $height="1px"
-          $width="100%"
-          $background="var(--c--contextuals--border--semantic--neutral--tertiary)"
-          $position="absolute"
-          $hasTransition
-          $radius="2px"
-          $css={css`
-            left: 0;
-            bottom: 0px;
-          `}
-        />
-        <Box as="span" $zIndex="1" $position="relative">
-          {titleWithoutEmoji}
-        </Box>
+        {titleWithoutEmoji}
       </Text>
     </Box>
   );

src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx

@@ -33,6 +33,18 @@ export const DocsEditorStyle = createGlobalStyle`
       font-family: var(--c--components--button--font-family);
     }
 
+    /**
+    * To fix a visual bug with multi-column blocks
+    * The first block in a multi-column layout had a negative margin
+    * by default, causing layout issues. This rule resets the margin.
+    * Current bug Blocknote version: 0.54.0
+    * TODO: Check if Blocknote updates this behavior in future versions
+    * and if yes, remove this rule.
+    */
+    .bn-block-outer[data-prev-depth-change] {
+        margin-left: 0;
+    }
+
     /**
     * Ensure long placeholder text is truncated with ellipsis
     */

src/frontend/apps/impress/src/features/docs/doc-header/components/DocTitle.tsx

@@ -46,7 +46,12 @@ export const DocTitleText = () => {
 
   return (
     <Box className={CLASS_DOC_TITLE} $direction="row" $align="center">
-      <Text as="h2" $margin="none" $size={isMobile ? 'h4' : 'h2'}>
+      <Text
+        as="h2"
+        $margin="none"
+        $size={isMobile ? 'h4' : 'h2'}
+        $display="unset"
+      >
         {emoji && <span aria-hidden="true">{emoji} </span>}
         {displayTitle}
       </Text>

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelCollapseButton.tsx

@@ -37,6 +37,7 @@ export const LeftPanelCollapseButton = ({
               $size="sm"
               $weight={700}
               $color="var(--c--globals--colors--gray-1000)"
+              $display="unset"
             >
               {buttonTitle}
             </Text>