From 93093667cd5111e9cf869a0ee959c0970ea12796 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Tue, 7 Jan 2025 15:39:57 -0800
Subject: [PATCH] Sanding and shimming in CSS related to Create menu - Create
 menu labels can now wrap. - Line height, padding adjusted for menu items. -
 Create menu filter input slimmed down a bit.

---
 src/api/menu/components/SuperMenu.vue |  3 +--
 src/styles/_constants-darkmatter.scss |  2 +-
 src/styles/_constants-espresso.scss   |  2 +-
 src/styles/_constants-maelstrom.scss  |  2 +-
 src/styles/_constants-snow.scss       |  2 +-
 src/styles/_controls.scss             | 27 ++++-----------------------
 6 files changed, 9 insertions(+), 29 deletions(-)

diff --git a/src/api/menu/components/SuperMenu.vue b/src/api/menu/components/SuperMenu.vue
index 3b4ddb1cbfd..d5db4b4ecc1 100644
--- a/src/api/menu/components/SuperMenu.vue
+++ b/src/api/menu/components/SuperMenu.vue
@@ -27,13 +27,12 @@
     :style="styleObject"
   >
     <div class="c-super-menu__left-col">
-      <div v-if="options.filterable" class="c-super-menu__filter">
+      <div v-if="options.filterable" class="c-super-menu__filter l-input-lg">
         <input
           ref="filterInput"
           v-model="searchTerm"
           type="text"
           placeholder="Filter..."
-          class="c-super-menu__filter-input"
           @input="filterItems"
           @keydown.stop="handleKeyDown"
           @click.stop
diff --git a/src/styles/_constants-darkmatter.scss b/src/styles/_constants-darkmatter.scss
index c86a6530e04..90fa8305b15 100644
--- a/src/styles/_constants-darkmatter.scss
+++ b/src/styles/_constants-darkmatter.scss
@@ -348,7 +348,7 @@ $colorMenuElementHilite: pullForward($colorMenuBg, 10%);
 $shdwMenu: rgba(black, 0.8) 0 2px 10px;
 $shdwMenuInner: inset 0 0 0 1px rgba(white, 0.2);
 $shdwMenuText: none;
-$menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
+$menuItemPad: 4px, 6px;
 
 // Palettes and Swatches
 $paletteItemBorderOuterColorSelected: black;
diff --git a/src/styles/_constants-espresso.scss b/src/styles/_constants-espresso.scss
index 36702317a57..9c6983414f2 100644
--- a/src/styles/_constants-espresso.scss
+++ b/src/styles/_constants-espresso.scss
@@ -317,7 +317,7 @@ $colorMenuElementHilite: pullForward($colorMenuBg, 10%);
 $shdwMenu: rgba(black, 0.8) 0 2px 10px;
 $shdwMenuInner: inset 0 0 0 1px rgba(white, 0.2);
 $shdwMenuText: none;
-$menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
+$menuItemPad: 4px, 6px;
 
 // Palettes and Swatches
 $paletteItemBorderOuterColorSelected: black;
diff --git a/src/styles/_constants-maelstrom.scss b/src/styles/_constants-maelstrom.scss
index b0f2999174c..8e0b8bc314d 100644
--- a/src/styles/_constants-maelstrom.scss
+++ b/src/styles/_constants-maelstrom.scss
@@ -333,7 +333,7 @@ $colorMenuElementHilite: pullForward($colorMenuBg, 10%);
 $shdwMenu: rgba(black, 0.8) 0 2px 10px;
 $shdwMenuInner: inset 0 0 0 1px rgba(white, 0.2);
 $shdwMenuText: none;
-$menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
+$menuItemPad: 4px, 6px;
 
 // Palettes and Swatches
 $paletteItemBorderOuterColorSelected: black;
diff --git a/src/styles/_constants-snow.scss b/src/styles/_constants-snow.scss
index 4b4efdb52bf..783e0e38e3f 100644
--- a/src/styles/_constants-snow.scss
+++ b/src/styles/_constants-snow.scss
@@ -316,7 +316,7 @@ $colorMenuElementHilite: darken($colorMenuBg, 10%);
 $shdwMenu: rgba(black, 0.8) 0 2px 10px;
 $shdwMenuInner: none;
 $shdwMenuText: none;
-$menuItemPad: $interiorMargin, floor($interiorMargin * 1.25);
+$menuItemPad: 4px, 6px;
 
 // Palettes and Swatches
 $paletteItemBorderOuterColorSelected: black;
diff --git a/src/styles/_controls.scss b/src/styles/_controls.scss
index 89899c27fe1..7d7cf98bca8 100644
--- a/src/styles/_controls.scss
+++ b/src/styles/_controls.scss
@@ -58,9 +58,11 @@
 @mixin menuInner() {
   li {
     @include cControl();
+    align-items: baseline;
     justify-content: start;
     cursor: pointer;
     display: flex;
+    line-height: 1.2em;
     padding: nth($menuItemPad, 1) nth($menuItemPad, 2);
     white-space: nowrap;
 
@@ -651,38 +653,16 @@ select {
   padding: $interiorMarginLg;
   flex-direction: row;
 
-  > [class*='__'] {
-    //flex: 1 1 50%;
-    //&:first-child {
-    //  margin-right: $m;
-    //}
-
-    &:last-child {
-      //border-left: 1px solid $colorInteriorBorder;
-      //padding-left: $m;
-    }
-  }
-
   &__left-col {
     display: flex;
     flex-direction: column;
     flex: 1 1 50%;
+    gap: $interiorMargin;
     margin-right: $m;
   }
 
   &__filter {
     flex: 0 0 auto;
-    width: 100%;
-    margin-bottom: $interiorMarginLg;
-
-    .c-super-menu__filter-input {
-      @include nice-input();
-      width: 100%;
-      padding: $interiorMargin;
-      &:focus {
-        background: $colorInputBg;
-      }
-    }
   }
 
   &__menu {
@@ -696,6 +676,7 @@ select {
 
     li {
       border-radius: $controlCr;
+      white-space: normal; // Let long names wrap
     }
   }