From e73a87c0a5d6afe773da13de8a3e11484ac49f59 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 3 Oct 2025 14:04:44 +0100
Subject: [PATCH 1/2] Use container queries instead of media queries for
 publish fields to fix their width when they're in a narrow stack

---
 packages/ui/src/Panel/Panel.vue      | 2 +-
 resources/css/components/publish.css | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/Panel/Panel.vue b/packages/ui/src/Panel/Panel.vue
index 0ef99f99c56..55df96b0d27 100644
--- a/packages/ui/src/Panel/Panel.vue
+++ b/packages/ui/src/Panel/Panel.vue
@@ -12,7 +12,7 @@ const props = defineProps({
 <template>
     <div
         :class="[
-            'relative bg-gray-200/50 [.bg-architectural-lines_&]:backdrop-blur-[10px] dark:bg-gray-950 dark:inset-shadow-2xs dark:inset-shadow-black',
+            '@container/panel relative bg-gray-200/50 [.bg-architectural-lines_&]:backdrop-blur-[10px] dark:bg-gray-950 dark:inset-shadow-2xs dark:inset-shadow-black',
             'w-full rounded-2xl mb-5 p-1.75 [&:has([data-ui-panel-header])]:pt-0 focus-none starting-style-transition starting-style-transition--siblings',
         ]"
         data-ui-panel
diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index 7f1985e50d1..1a8c2540e8f 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -6,11 +6,11 @@
     display: grid;
     --grid-columns: 12;
     grid-template-columns: repeat(var(--grid-columns), 1fr);
-    @apply gap-3 lg:gap-8;
+    @apply gap-3 @lg/panel:gap-8;
 
     aside & {
         /* Decrease */
-        @apply gap-x-2 gap-y-3 lg:gap-y-6;
+        @apply gap-x-2 gap-y-3 @lg/panel:gap-y-6;
     }
 
     .form-group {
@@ -18,7 +18,7 @@
     }
 }
 
-@variant lg {
+@variant @lg/panel {
     .field-w-25  { --col-span: calc(var(--grid-columns) * 0.25); }
     .field-w-33  { --col-span: calc(var(--grid-columns) * 0.333); }
     .field-w-50  { --col-span: calc(var(--grid-columns) * 0.5); }

From 143d680476c062f5ac5cf48c8753738ff292634b Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Fri, 3 Oct 2025 14:10:02 +0100
Subject: [PATCH 2/2] Adjust y gap value based on a narrow publish field in a
 stack (a long nav item in cp/navigation/something)

---
 resources/css/components/publish.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/css/components/publish.css b/resources/css/components/publish.css
index 1a8c2540e8f..313fe245414 100644
--- a/resources/css/components/publish.css
+++ b/resources/css/components/publish.css
@@ -6,7 +6,7 @@
     display: grid;
     --grid-columns: 12;
     grid-template-columns: repeat(var(--grid-columns), 1fr);
-    @apply gap-3 @lg/panel:gap-8;
+    @apply gap-x-3 gap-6 @lg/panel:gap-8;
 
     aside & {
         /* Decrease */