Fix some styling

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/src/components/Menu/Combobox.tsx

@@ -201,7 +201,7 @@ export const Combobox = forwardRef<HTMLDivElement, MenuComboboxProps>(
           className="canon-SubmenuComboboxSearch"
           type="text"
           role="combobox"
-          placeholder="Filter"
+          placeholder="Filter..."
           aria-labelledby={triggerId}
           aria-controls={listboxId}
           aria-autocomplete="list"
@@ -212,7 +212,6 @@ export const Combobox = forwardRef<HTMLDivElement, MenuComboboxProps>(
           onKeyDown={handleKeyDown}
           onChange={handleSearchChange}
         />
-
         <div
           role="listbox"
           id={listboxId}

packages/canon/src/components/Menu/Menu.styles.css

@@ -3,7 +3,6 @@
 }
 
 .canon-MenuPopup {
-  padding: var(--canon-space-1) 0;
   display: flex;
   flex-direction: column;
   border-radius: 0.375rem;
@@ -16,6 +15,7 @@
   max-width: min(var(--available-width), 340px);
   max-height: min(var(--available-height), 500px);
   transition: transform 150ms, opacity 150ms;
+  position: relative;
 
   &[data-starting-style],
   &[data-ending-style] {
@@ -38,6 +38,15 @@
   padding-inline: var(--canon-space-2);
   font-size: var(--canon-font-size-3);
   cursor: pointer;
+  flex-shrink: 0;
+
+  &:first-child {
+    margin-top: var(--canon-space-1);
+  }
+
+  &:last-child {
+    margin-bottom: var(--canon-space-1);
+  }
 
   &[data-highlighted] {
     background-color: var(--canon-gray-3);
@@ -59,6 +68,7 @@
   padding-inline: var(--canon-space-2);
   font-size: var(--canon-font-size-3);
   cursor: pointer;
+  flex-shrink: 0;
 
   & .canon-Icon {
     color: var(--canon-fg-secondary);
@@ -81,22 +91,23 @@
 }
 
 .canon-SubmenuComboboxSearch {
-  padding: var(--canon-space-2) var(--canon-space-5);
+  padding-inline: var(--canon-space-3);
+  height: 32px;
   border: none;
   border-bottom: 1px solid var(--canon-border);
   background-color: var(--canon-bg-surface-1);
   color: var(--canon-fg-primary);
   line-height: 140%;
   outline: none;
+  font-size: var(--canon-font-size-3);
+  position: sticky;
+  top: 0;
+  z-index: 1;
 
   &::placeholder {
     color: var(--canon-fg-secondary);
   }
 
-  &:focus {
-    border-color: var(--canon-border-hover);
-  }
-
   &:disabled {
     opacity: 0.6;
     cursor: not-allowed;
@@ -112,8 +123,9 @@
 }
 
 .canon-SubmenuComboboxNoResults {
-  padding: var(--canon-space-3);
-  padding-left: var(--canon-space-5);
+  padding-inline: var(--canon-space-3);
+  padding-top: var(--canon-space-2);
+  padding-bottom: var(--canon-space-4);
   color: var(--canon-fg-secondary);
   font-size: var(--canon-font-size-3);
 }
@@ -134,6 +146,7 @@
   font-size: var(--canon-font-size-3);
   cursor: pointer;
   user-select: none;
+  flex-shrink: 0;
 
   &[data-highlighted] {
     background-color: var(--canon-gray-3);