diff --git a/assets/stylesheets/modules/ai-helper/common/ai-helper.scss b/assets/stylesheets/modules/ai-helper/common/ai-helper.scss index 60d18906..5541cd90 100644 --- 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; }