Adjust block chooser styles to match latest designs

Author: thibaudcolas

client/src/components/ComboBox/ComboBox.scss

@@ -1,8 +1,8 @@
 // Ensure consistent spacing across the whole component.
 // With the scrolling and show/hide of the field, correct spacing is critical.
 $spacing: theme('spacing.[2.5]');
-$spacing-sm: theme('spacing.5');
-$width: min(1000px, 75vw);
+$spacing-sm: theme('spacing.4');
+$width: clamp(300px, 75vw, 1000px);
 
 .w-combobox-container {
   @include dark-theme() {
@@ -28,9 +28,9 @@ $width: min(1000px, 75vw);
 
   // Case 1: base case
   // Use max-content width to minimize shifting due to content wrapping,
-  // while also ensuring it's not wider than 75% of the viewport.
+  // constraining width to 75% of viewport for devices above 400px width.
   width: max-content;
-  max-width: 75vw;
+  max-width: max(300px, 75vw);
 
   // Case 2: there's a previewable block, but the preview may or may not be active
   // On smaller screens, the preview will be shown below. We don't want the
@@ -87,12 +87,13 @@ $width: min(1000px, 75vw);
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-auto-flow: column;
-  gap: theme('spacing.[0.5]');
+  gap: theme('spacing.1');
   padding: $spacing;
   padding-top: 0;
 
   @include media-breakpoint-up(sm) {
     width: 100%;
+    column-gap: theme('spacing.5');
     padding: $spacing-sm;
     padding-top: 0;
   }
@@ -120,15 +121,22 @@ $width: min(1000px, 75vw);
 }
 
 .w-combobox__option-preview {
+  @include more-contrast-interactive();
+  @include show-focus-outline-inside();
+  color: theme('colors.icon-secondary');
   background: none;
+  border: 1px solid transparent;
   padding: 0;
   width: 100%;
 
   .icon {
-    color: theme('colors.icon-secondary');
     width: theme('spacing.3');
     height: theme('spacing.3');
   }
+
+  &:hover {
+    color: theme('colors.icon-secondary-hover');
+  }
 }
 
 .w-combobox__option-row--col1 {
@@ -143,17 +151,17 @@ $width: min(1000px, 75vw);
   display: grid;
   grid-template-columns: theme('spacing.8') 1fr;
   align-items: center;
-  padding: theme('spacing.2');
-  border: 1px solid transparent;
+  padding: theme('spacing.[2.5]');
+  border: 1px dotted theme('colors.border-button-small-outline-default');
   font-size: 0.875rem;
   line-height: theme('lineHeight.tight');
   border-radius: theme('borderRadius.sm');
+  cursor: pointer;
 
   &[aria-selected='true'] {
     border-color: theme('colors.border-button-outline-default');
     color: theme('colors.text-link-default');
     background: transparent;
-    cursor: pointer;
 
     @media (forced-colors: active) {
       background: Highlight;