new-log-viewer: In the menubar, show file name with a centered ellips…

…is when the name overflows (Fixes #97). (#98)
y-scope · Oct 21, 2024 · 02a80c8 · 02a80c8
1 parent 10599f4
commit 02a80c8
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 8 deletions.
diff --git a/new-log-viewer/src/components/MenuBar/PageNumInput.css b/new-log-viewer/src/components/MenuBar/PageNumInput.css
@@ -1,3 +1,9 @@
+.page-num-input {
+    /* Ensures the content within the element does not wrap, preventing visual overflow when
+      adjacent elements under the same parent container attempt to take up space. */
+    white-space: nowrap;
+}
+
 .page-num-input input::-webkit-outer-spin-button,
 .page-num-input input::-webkit-inner-spin-button {
     margin: 0;

diff --git a/new-log-viewer/src/components/MenuBar/index.css b/new-log-viewer/src/components/MenuBar/index.css
@@ -14,15 +14,28 @@
 .menu-bar-logo-container {
     display: flex;
     justify-content: center;
-    width: 48px;
+    min-width: 48px;
     height: var(--ylv-status-bar-height);
 }
 
 .menu-bar-open-file-icon {
     font-size: 24px !important;
 }
 
-.menu-bar-filename {
+.menu-bar-filename-container {
+    overflow-x: hidden;
+    display: flex;
     flex-grow: 1;
-    padding-left: 10px;
+    padding-inline: 0.75rem !important;
+}
+
+.menu-bar-filename-left-split {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+}
+
+.menu-bar-filename-right-split {
+    overflow-x: hidden;
+    display: flex !important;
+    justify-content: flex-end;
 }
diff --git a/new-log-viewer/src/components/MenuBar/index.tsx b/new-log-viewer/src/components/MenuBar/index.tsx
@@ -1,6 +1,7 @@
 import {useContext} from "react";
 
 import {
+    Box,
     Divider,
     IconButton,
     Sheet,
@@ -59,12 +60,23 @@ const MenuBar = () => {
                 </Tooltip>
                 <Divider orientation={"vertical"}/>
 
-                <Typography
-                    className={"menu-bar-filename"}
-                    level={"body-md"}
+                <Box
+                    className={"menu-bar-filename-container"}
+                    title={fileName}
                 >
-                    {fileName}
-                </Typography>
+                    <Typography
+                        className={"menu-bar-filename-left-split"}
+                        level={"body-md"}
+                    >
+                        {fileName.slice(0, fileName.length / 2)}
+                    </Typography>
+                    <Typography
+                        className={"menu-bar-filename-right-split"}
+                        level={"body-md"}
+                    >
+                        {fileName.slice(fileName.length / 2)}
+                    </Typography>
+                </Box>
 
                 <Divider orientation={"vertical"}/>
                 <NavigationBar/>