From 39814d439f2007fe6b68e66c10c85d1d0eda2677 Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 2 Jul 2025 13:51:41 -0700
Subject: [PATCH] feat: enhance non-responsive content styles in
 default-base.css

- Reintroduced the .content--non-responsive class to maintain a minimum width for complex page templates.
- Updated styles for definition lists to ensure proper layout and responsiveness.
- Added specific input field max-widths to improve usability in non-responsive contexts.

This change aims to ensure that non-responsive layouts are styled correctly while maintaining usability across various input types. No further changes are pending for this task.
---
 .../plugins/dynamix/styles/default-base.css   | 48 +++++++++++++++++--
 1 file changed, 43 insertions(+), 5 deletions(-)

diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css
index bf9e78a9c..1b5661f7f 100644
--- a/emhttp/plugins/dynamix/styles/default-base.css
+++ b/emhttp/plugins/dynamix/styles/default-base.css
@@ -1312,11 +1312,6 @@ a.list {
     }
 }
 
-/* Necessary evil to prevent rewrites of complex page templates for responsive layout - i.e. VMedit.php */
-.content--non-responsive {
-    min-width: 1200px;
-}
-
 .tabs {
     display: flex;
     align-items: center;
@@ -1576,6 +1571,49 @@ dd {
     }
 }
 
+/* Necessary evil to prevent rewrites of complex page templates for responsive layout - i.e. VMedit.php */
+.content--non-responsive {
+    min-width: 1200px;
+
+    /* override the dl > dt + dd responsive styles, inheriting the "desktop" styles defined below */
+    dl {
+        grid-template-columns: 35% 1fr;
+        gap: 1.5rem 2rem;
+    }
+    dt {
+        text-align: right;
+    }
+    dd {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        /* white-space: nowrap; */
+
+        input[type="text"],
+        input[type="password"],
+        input[type="number"],
+        input[type="url"],
+        input[type="email"],
+        input[type="date"],
+        input[type="file"],
+        input:not([type="submit"]),
+        input:not([type="button"]),
+        input:not([type="checkbox"]),
+        input:not([type="radio"]),
+        input:not([class*="narrow"]),
+        textarea,
+        .textarea,
+        select,
+        .ui-dropdownchecklist-selector-wrapper {
+            max-width: 400px;
+        }
+
+        .narrow {
+            max-width: 150px !important;
+        }
+    }
+}
+
 /* Responsive styles for definition lists */
 @media (min-width: 769px) {
     dl {