fix(navigation): force fluid layout with wordbreak

1024pix · Nov 28, 2024 · 3babdcb · 3babdcb
1 parent dc3d2a1
commit 3babdcb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/addon/styles/_pix-app-layout.scss b/addon/styles/_pix-app-layout.scss
@@ -1,6 +1,8 @@
 .pix-app-layout {
+  --pix-navigation-width:  13.375rem;
+
   display: grid;
-  grid-template-columns: minmax(214px, auto) 1fr;
+  grid-template-columns: var(--pix-navigation-width) 1fr;
   gap: var(--pix-spacing-6x);
   padding: var(--pix-spacing-6x);
 

diff --git a/addon/styles/_pix-navigation.scss b/addon/styles/_pix-navigation.scss
@@ -11,7 +11,7 @@
   gap:var(--pix-spacing-6x);
   align-items: center;
   justify-content: space-between;
-  min-width: 214px;
+  min-width: var(--pix-navigation-width);
   height: auto;
   min-height: calc(100vh - var(--pix-spacing-6x) * 2);
 
@@ -119,6 +119,10 @@
 
     @extend %pix-body-s;
 
+    p {
+      word-break: break-all;
+    }
+
     @include device-is('mobile') {
       display: none;
 

diff --git a/addon/styles/_pix-structure-switcher.scss b/addon/styles/_pix-structure-switcher.scss
@@ -75,6 +75,10 @@
     text-overflow: ellipsis;
     border-radius: var(--border-radius-2x);
 
+    &:focus:not(.pix-select-list-category__option--selected )  {
+      background-color: var(--pix-structure-bg-hover);
+    }
+
     &:hover {
       background-color: var(--pix-structure-bg-hover);
     }
@@ -88,5 +92,9 @@
     &:hover {
       background-color: var(--pix-navigation-color);
     }
+
+    &:focus {
+      color: var(--pix-neutral-800)
+    }
   }
 }