refactor(navigation): simplify navigation panel layout and styling

- Flatten navigation buttons structure in NavigationPanel
- Update CSS to improve horizontal scrolling and button layout
- Add title attribute to navigation buttons for better accessibility

Author: Xavier-LB

resources/icons/grid-view.svg

@@ -215,51 +215,24 @@
 }
 
 .navigation-buttons {
-  // display: flex;
-  // flex-wrap: wrap;
-  padding: 0.2rem;
-
-  .navigation-buttons-raw {
-    display: flex;
-
-    .navigation-button {
-      // flex: 1;
-
-      display: inline-block;
-      flex-direction: column;
-      background-color: var(--background-color);
-      border-radius: 10px;
-      width: 100%;
-      min-width: 50px;
-      cursor: pointer;
-      // max-width: 120px;
-
-      margin: 0.2rem;
-
-      &:hover {
-        background-color: var(--text-color-alt);
-      }
-
-      .navigation-button__icon {
-        .custom-icon {
-          width: 1.4rem;
-          height: 1.4rem;
-        }
-      }
-
-      .navigation-button__label {
-      }
-    }
-  }
+  display: flex;
+  overflow-x: auto; /* Allows horizontal scrolling if needed */
+  white-space: nowrap; /* Prevents text wrapping */
+}
 
-  .navigation-button--checked {
-    box-shadow: inset 0 0 0 2px var(--accent-color);
-    background-color: none;
+.navigation-button {
+  // flex: 0 0 auto; /* Prevents buttons from shrinking */
+  width: 100%; /* Square width */
+  // height: 100%; /* Square height */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 2px;
+  transition: border-color 0.3s;
+  border-radius: 10px;
+}
 
-    .navigation-button__icon {
-      .custom-icon {
-        color: var(--accent-color);
-      }
-    }
-  }
+.navigation-button--checked {
+  background-color: var(--background-color);
+  border-radius: 10px;
 }

resources/style/outliner.scss

@@ -22,6 +22,7 @@ export const NavigationButton = ({
   checked,
 }: NavigationButtonProps) => (
   <button
+    title={text}
     className={'navigation-button' + (checked ? ' navigation-button--checked' : '')}
     tabIndex={-1}
     aria-checked={checked}
@@ -39,40 +40,36 @@ const TagsPanel = observer((props: Partial<MultiSplitPaneProps>) => {
 
   return (
     <div className="navigation-buttons">
-      <div className="navigation-buttons-raw">
-        <NavigationButton
-          icon={IconSet.VIEW_LIST}
-          onClick={uiStore.setMethodList}
-          checked={uiStore.isList}
-          text="List"
-        />
-        <NavigationButton
-          icon={IconSet.VIEW_GRID}
-          onClick={uiStore.setMethodMasonry}
-          checked={uiStore.isMasonry}
-          text="Grid"
-        />
-      </div>
-      <div className="navigation-buttons-raw">
-        <NavigationButton
-          icon={IconSet.FACE_SMILING}
-          onClick={uiStore.setMethodFaces}
-          checked={uiStore.isFaces}
-          text="Faces"
-        />
-        <NavigationButton
-          icon={IconSet.WORLD}
-          onClick={uiStore.setMethodMap}
-          checked={uiStore.isMap}
-          text="Map"
-        />
-        <NavigationButton
-          icon={IconSet.FILTER_DATE}
-          onClick={uiStore.setMethodCalendar}
-          checked={uiStore.isCalendar}
-          text="Calendar"
-        />
-      </div>
+      <NavigationButton
+        icon={IconSet.VIEW_LIST}
+        onClick={uiStore.setMethodList}
+        checked={uiStore.isList}
+        text="List"
+      />
+      <NavigationButton
+        icon={IconSet.VIEW_GRID}
+        onClick={uiStore.setMethodMasonry}
+        checked={uiStore.isMasonry}
+        text="Grid"
+      />
+      <NavigationButton
+        icon={IconSet.FACE_SMILING}
+        onClick={uiStore.setMethodFaces}
+        checked={uiStore.isFaces}
+        text="Faces"
+      />
+      <NavigationButton
+        icon={IconSet.WORLD}
+        onClick={uiStore.setMethodMap}
+        checked={uiStore.isMap}
+        text="Map"
+      />
+      <NavigationButton
+        icon={IconSet.FILTER_DATE}
+        onClick={uiStore.setMethodCalendar}
+        checked={uiStore.isCalendar}
+        text="Calendar"
+      />
     </div>
   );
 });