From 14aa72ad99b9cb05f813d33ab779e4e335fd2860 Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Mon, 9 Jun 2025 19:41:18 +0200
Subject: [PATCH] UX: Mini fixes and tweaks (#179)

* Changing the category & tag dropdown back into their original form.
The breadcrumb idea isn't working well.

| BC | AC |
|--------|--------|
| ![CleanShot 2025-06-09 at 18 59
37@2x](https://github.com/user-attachments/assets/cbeb3aaf-ad0e-4085-8548-58ea0a521c95)
| ![CleanShot 2025-06-09 at 18 57
33@2x](https://github.com/user-attachments/assets/15db752b-4983-4b7f-b6f8-9a8ded9e6f9f)
|

* Alignment fix in chat navbar drawer

| BC | AC |
|--------|--------|
| ![CleanShot 2025-06-09 at 18 59
18@2x](https://github.com/user-attachments/assets/38c7dcee-dc77-4a44-ae8d-5ecb7910536b)
| ![CleanShot 2025-06-09 at 18 58
36@2x](https://github.com/user-attachments/assets/be699f88-4e5e-4d8c-ab4d-f6d1eca93037)
|
---
 scss/chat.scss         | 8 +++++++-
 scss/mobile-stuff.scss | 8 +++++---
 scss/nav-pills.scss    | 2 +-
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/scss/chat.scss b/scss/chat.scss
index 5006c1f..62ce9d1 100644
--- a/scss/chat.scss
+++ b/scss/chat.scss
@@ -5,7 +5,9 @@
 }
 
 .c-navbar-container {
-  padding: 0 1.5em;
+  .full-page-chat & {
+    padding: 0 1.5em;
+  }
   background-color: var(--d-content-background);
 }
 
@@ -21,6 +23,10 @@ body.has-full-page-chat {
   .chat-drawer.is-expanded & {
     border: none;
   }
+
+  .c-navbar__title {
+    padding-left: 0.33em; // visual alignment for chat index, which does not havea a backarrow
+  }
 }
 
 .chat-drawer-outlet-container {
diff --git a/scss/mobile-stuff.scss b/scss/mobile-stuff.scss
index 5586cc3..0c5bd6c 100644
--- a/scss/mobile-stuff.scss
+++ b/scss/mobile-stuff.scss
@@ -34,11 +34,10 @@
       @include viewport.until(sm) {
         gap: var(--spacing-inline-s);
 
-        // don't know why we even hide this crucial navigation on mobile
         .category-breadcrumb.hidden,
         .category-breadcrumb {
           display: flex !important;
-          column-gap: var(--spacing-inline-s);
+          column-gap: var(--spacing-inline-m);
           row-gap: var(--spacing-block-xs);
           flex-basis: 100%;
 
@@ -49,9 +48,12 @@
             ); // 2px is width of the outline
           }
 
+          .select-kit-header-wrapper {
+            gap: 0.25em;
+          }
+
           .select-kit-header {
             background: var(--d-content-background);
-            border: 0;
           }
         }
 
diff --git a/scss/nav-pills.scss b/scss/nav-pills.scss
index 6f268f2..76b201b 100644
--- a/scss/nav-pills.scss
+++ b/scss/nav-pills.scss
@@ -17,7 +17,7 @@
   .combo-box .combo-box-header {
     // needs more specificity than just in the button file
     background-color: var(--secondary);
-    border-radius: var(--d-border-radius-large);
+    border-radius: var(--d-border-radius);
     border: 1px solid var(--primary-300);
 
     &:hover {