UX: Allow rounded corners

assets/stylesheets/modules/ai-helper/common/ai-helper.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 .composer-ai-helper-modal {
   .text-preview,
   .inline-diff {
@@ -179,7 +181,7 @@
 
 @keyframes dot-falling {
   0% {
-    box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);
+    box-shadow: 9999px -15px 0 0 rgb(152, 128, 255, 0);
   }
 
   25%,
@@ -189,13 +191,13 @@
   }
 
   100% {
-    box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);
+    box-shadow: 9999px 15px 0 0 rgb(152, 128, 255, 0);
   }
 }
 
 @keyframes dot-falling-before {
   0% {
-    box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);
+    box-shadow: 9984px -15px 0 0 rgb(152, 128, 255, 0);
   }
 
   25%,
@@ -205,13 +207,13 @@
   }
 
   100% {
-    box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);
+    box-shadow: 9984px 15px 0 0 rgb(152, 128, 255, 0);
   }
 }
 
 @keyframes dot-falling-after {
   0% {
-    box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);
+    box-shadow: 10014px -15px 0 0 rgb(152, 128, 255, 0);
   }
 
   25%,
@@ -221,7 +223,7 @@
   }
 
   100% {
-    box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);
+    box-shadow: 10014px 15px 0 0 rgb(152, 128, 255, 0);
   }
 }
 
@@ -232,19 +234,6 @@
     input:focus {
       z-index: 1;
     }
-
-    input {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-
-  .category-chooser,
-  .mini-tag-chooser {
-    .select-kit-header {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
   }
 
   #edit-title {
@@ -639,7 +628,7 @@
     height: 7em;
     min-width: var(--ai-caption-popup-min-width);
 
-    @include breakpoint(tablet) {
+    @include viewport.until(md) {
       width: 100%;
       max-width: unset;
       min-width: unset;
@@ -658,7 +647,7 @@
 
       .desktop-view & {
         // a little extra space for extra narrow desktop view
-        @media screen and (max-width: 675px) {
+        @media screen and (width <= 675px) {
           span {
             display: none;
           }