Fixed Link responsive styling bug

#16296 (reply in thread) [ci skip]
craftcms · Dec 10, 2024 · 8c5cb97 · roberttolton · Dec 11, 2024 · 8c5cb97
1 parent 5d999d9
commit 8c5cb97
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 - Fixed a bug where custom fields would stay visible within Field Layout Designer field libraries when they didn’t match the search criteria, if they had previously been dragged. ([#16277](https://github.com/craftcms/cms/issues/16277))
 - Fixed a bug where new, unsaved nested addresses and entries could cause validation errors when saving the owner element. ([#16282](https://github.com/craftcms/cms/issues/16282))
 - Fixed a bug where spaces in phone number values within Link fields were getting replaced with `+` characters rather than `-`. ([#16300](https://github.com/craftcms/cms/issues/16300))
+- Fixed a bug where Link fields weren’t responsive for small container sizes.
 
 ## 5.5.5 - 2024-12-03
 

diff --git a/src/web/assets/cp/dist/css/cp.css b/src/web/assets/cp/dist/css/cp.css
diff --git a/src/web/assets/cp/dist/css/cp.css.map b/src/web/assets/cp/dist/css/cp.css.map
diff --git a/src/web/assets/cp/src/css/_main.scss b/src/web/assets/cp/src/css/_main.scss
@@ -3429,7 +3429,7 @@ table {
     flex-direction: row;
     align-items: center;
     gap: var(--s);
-    max-width: 100%;
+    width: 100%;
 
     .status,
     .icon {
@@ -3441,6 +3441,10 @@ table {
       margin-inline: -1px;
     }
 
+    .label {
+      flex: 1;
+    }
+
     .chip-label {
       padding-block: var(--2xs);
       padding-inline: 0;
@@ -7658,8 +7662,6 @@ textarea.text.fullwidth {
 }
 
 .link-input {
-  container-type: inline-size;
-
   & > .flex {
     & > div {
       &.text-link {
@@ -7697,17 +7699,23 @@ textarea.text.fullwidth {
         }
       }
     }
-  }
 
-  @container (max-width: 399px) {
-    & {
-      flex-direction: column;
-      align-items: start;
+    @container (max-width: calc(399rem/16)) {
+      & {
+        flex-direction: column;
+        align-items: stretch;
 
-      & > .select,
-      & > .select select,
-      & > div > .text {
-        width: 100%;
+        & > .select,
+        & > .select select,
+        & > div[data-link-type] .text,
+        & > div[data-link-type] .chip {
+          display: flex;
+          width: 100%;
+        }
+
+        & > div[data-link-type] ul.elements {
+          align-items: stretch;
+        }
       }
     }
   }
@@ -7814,6 +7822,7 @@ fieldset {
 
   & > .input {
     position: relative;
+    container-type: inline-size;
 
     & + .instructions {
       margin-block: 5px 0;