UX: Allow rounded corners (#1365)

jordanvidrine · web-flow · commit adc92e1e75d1 · 2025-05-23T10:42:55.000-05:00
diff --git a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss b/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;
           }

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+@use "lib/viewport";`
	`2`	`+`
`1`	`3`	`.composer-ai-helper-modal {`
`2`	`4`	`.text-preview,`
`3`	`5`	`.inline-diff {`
`@@ -179,7 +181,7 @@`
`179`	`181`
`180`	`182`	`@keyframes dot-falling {`
`181`	`183`	`0% {`
`182`		`- box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);`
	`184`	`+ box-shadow: 9999px -15px 0 0 rgb(152, 128, 255, 0);`
`183`	`185`	`}`
`184`	`186`
`185`	`187`	`25%,`
`@@ -189,13 +191,13 @@`
`189`	`191`	`}`
`190`	`192`
`191`	`193`	`100% {`
`192`		`- box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);`
	`194`	`+ box-shadow: 9999px 15px 0 0 rgb(152, 128, 255, 0);`
`193`	`195`	`}`
`194`	`196`	`}`
`195`	`197`
`196`	`198`	`@keyframes dot-falling-before {`
`197`	`199`	`0% {`
`198`		`- box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);`
	`200`	`+ box-shadow: 9984px -15px 0 0 rgb(152, 128, 255, 0);`
`199`	`201`	`}`
`200`	`202`
`201`	`203`	`25%,`
`@@ -205,13 +207,13 @@`
`205`	`207`	`}`
`206`	`208`
`207`	`209`	`100% {`
`208`		`- box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);`
	`210`	`+ box-shadow: 9984px 15px 0 0 rgb(152, 128, 255, 0);`
`209`	`211`	`}`
`210`	`212`	`}`
`211`	`213`
`212`	`214`	`@keyframes dot-falling-after {`
`213`	`215`	`0% {`
`214`		`- box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);`
	`216`	`+ box-shadow: 10014px -15px 0 0 rgb(152, 128, 255, 0);`
`215`	`217`	`}`
`216`	`218`
`217`	`219`	`25%,`
`@@ -221,7 +223,7 @@`
`221`	`223`	`}`
`222`	`224`
`223`	`225`	`100% {`
`224`		`- box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);`
	`226`	`+ box-shadow: 10014px 15px 0 0 rgb(152, 128, 255, 0);`
`225`	`227`	`}`
`226`	`228`	`}`
`227`	`229`
`@@ -232,19 +234,6 @@`
`232`	`234`	`input:focus {`
`233`	`235`	`z-index: 1;`
`234`	`236`	`}`
`235`		`-`
`236`		`- input {`
`237`		`- border-top-right-radius: 0;`
`238`		`- border-bottom-right-radius: 0;`
`239`		`- }`
`240`		`- }`
`241`		`-`
`242`		`- .category-chooser,`
`243`		`- .mini-tag-chooser {`
`244`		`- .select-kit-header {`
`245`		`- border-top-right-radius: 0;`
`246`		`- border-bottom-right-radius: 0;`
`247`		`- }`
`248`	`237`	`}`
`249`	`238`
`250`	`239`	`#edit-title {`
`@@ -639,7 +628,7 @@`
`639`	`628`	`height: 7em;`
`640`	`629`	`min-width: var(--ai-caption-popup-min-width);`
`641`	`630`
`642`		`- @include breakpoint(tablet) {`
	`631`	`+ @include viewport.until(md) {`
`643`	`632`	`width: 100%;`
`644`	`633`	`max-width: unset;`
`645`	`634`	`min-width: unset;`
`@@ -658,7 +647,7 @@`
`658`	`647`
`659`	`648`	`.desktop-view & {`
`660`	`649`	`// a little extra space for extra narrow desktop view`
`661`		`- @media screen and (max-width: 675px) {`
	`650`	`+ @media screen and (width <= 675px) {`
`662`	`651`	`span {`
`663`	`652`	`display: none;`
`664`	`653`	`}`