From 712f011f34263b4d453ae03a9ed2d4feb8290949 Mon Sep 17 00:00:00 2001
From: Hadi Zarkoob <hadi.zarkoob114@gmail.com>
Date: Thu, 29 Jan 2026 11:54:30 -0800
Subject: [PATCH 1/5] Improve the layout of the Details page

---
 apps/_dashboard/static/css/no.css | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/apps/_dashboard/static/css/no.css b/apps/_dashboard/static/css/no.css
index 0f337348..4cfdbe61 100644
--- a/apps/_dashboard/static/css/no.css
+++ b/apps/_dashboard/static/css/no.css
@@ -209,7 +209,11 @@ input[type='color'], input[type='date'], input[type='datetime'], input[type='tim
   font-family: monospace;
   font-size: 1em;
   padding: .5em 1.0em .5em;
+
+  /* The intended value is -webkit-fill-available, with fallbacks provided just in case. */
   width: 100%;
+  width: -moz-available;
+  width: -webkit-fill-available;
 }
 
 input[type='color']:focus, input[type='date']:focus, input[type='time']:focus, input[type='datetime']:focus, input[type='datetime-local']:focus, input[type='email']:focus, input[type='month']:focus, input[type='number']:focus, input[type='password']:focus, input[type='search']:focus, input[type='tel']:focus, input[type='text']:focus, input[type='url']:focus, input[type='week']:focus, input:not([type]):focus, textarea:focus, select:focus {
@@ -221,6 +225,11 @@ select {
   background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23d1d1d1" d="M0,0l6,8l6-8"/></svg>') center right no-repeat;
   background-color: #222 !important;
   color: white !important;
+
+  /* Remove the browser’s native <select> arrow */
+  appearance: none;
+  -webkit-appearance: none; /* Safari / Chrome */
+  -moz-appearance: none;    /* Firefox */
 }
 
 select option {
@@ -244,6 +253,7 @@ fieldset {
 
 input[type='checkbox'], input[type='radio'] {
   display: inline;
+  margin-right: 10px;
 }
 
 [disabled] {
@@ -507,7 +517,7 @@ input[type=checkbox]:checked ~ div {visibility:visible; opacity:1}
 }
 
 /****************************************************
- convenience
+ Convenience
  ****************************************************/
 
 [role="alert"] {
@@ -558,9 +568,24 @@ body { background: black; color: white; }
 body > center > * { max-width: 90vw; }
 form { max-width: 900px; }
 nav.black a, a { color: #33BFFF; }
-label:not(.help) { color: black; background-color: #CCC; padding: 2px 5px; margin: 5px 0 0 10px; border-top-left-radius: 5px; border-top-right-radius: 5px}
+label:not(.help) { color: black; background-color: #CCC; padding: 2px 5px; margin: 5px 0 0 0px; border-top-left-radius: 5px; border-top-right-radius: 5px}
 span ~ label { border-radius: 5px;}
-label ~ div { position: relative; top: -5px}
+label ~ div { 
+  position: relative; 
+  /* top: -5px; */
+  padding: 5px;
+  background-color: hsl(0, 0%, 15%);
+  border-radius: 6px;
+  min-height: 35px;
+  max-height: 150px;
+  overflow-wrap: break-word;
+  overflow: auto;
+}
+
+div:has(> label) {
+  margin-bottom: 18px;
+}
+
 button, a[role=button], input[type=submit], input[type=button] { background-color: #33BFFF; color: black}
 p, input, textarea { margin: 5px}
 thead>tr {background: black; border-top: 2px solid #33BFFF; border-bottom: 2px solid #33BFFF;}

From 55e16b08e48564549394785ff5545df468e7ba47 Mon Sep 17 00:00:00 2001
From: Hadi Zarkoob <hadi.zarkoob114@gmail.com>
Date: Thu, 29 Jan 2026 13:59:52 -0800
Subject: [PATCH 2/5] Make the Edit page error messages visible in the
 dashboard

---
 apps/_dashboard/static/css/no.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/_dashboard/static/css/no.css b/apps/_dashboard/static/css/no.css
index 4cfdbe61..48c284ca 100644
--- a/apps/_dashboard/static/css/no.css
+++ b/apps/_dashboard/static/css/no.css
@@ -562,7 +562,7 @@ ul.tags-list li[data-selected=true] {
   opacity: 1.0;
 }
 
-.py4web-validation-error{margin-top:-16px; font-size:0.8em;color:red;}
+.py4web-validation-error{margin-top:-3px; font-size:0.8em;color:red;}
 .grid-table-wrapper{overflow-x: auto;}
 body { background: black; color: white; }
 body > center > * { max-width: 90vw; }
@@ -575,7 +575,7 @@ label ~ div {
   /* top: -5px; */
   padding: 5px;
   background-color: hsl(0, 0%, 15%);
-  border-radius: 6px;
+  /* border-radius: 6px; */
   min-height: 35px;
   max-height: 150px;
   overflow-wrap: break-word;

From 34e9f33d1b2e502e15ad735756b401d120ac30ef Mon Sep 17 00:00:00 2001
From: Hadi Zarkoob <hadi.zarkoob114@gmail.com>
Date: Thu, 29 Jan 2026 15:38:26 -0800
Subject: [PATCH 3/5] Rounded borders for the fields on the Details page

Apply rounded borders to the fields on the Details page to give them a non-editable appearance.

This will also affect the Edit page, but it should be fine, as the rounded borders will change the field backgrounds there.
---
 apps/_dashboard/static/css/no.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/_dashboard/static/css/no.css b/apps/_dashboard/static/css/no.css
index 48c284ca..c173819d 100644
--- a/apps/_dashboard/static/css/no.css
+++ b/apps/_dashboard/static/css/no.css
@@ -575,7 +575,7 @@ label ~ div {
   /* top: -5px; */
   padding: 5px;
   background-color: hsl(0, 0%, 15%);
-  /* border-radius: 6px; */
+  border-radius: 6px;
   min-height: 35px;
   max-height: 150px;
   overflow-wrap: break-word;

From 98d48a4f9c901ef48ba32628d7723404b59c679c Mon Sep 17 00:00:00 2001
From: Hadi Zarkoob <hadi.zarkoob114@gmail.com>
Date: Thu, 29 Jan 2026 21:45:48 -0800
Subject: [PATCH 4/5] Adjust background colors for elements on the Edit and
 Details pages

---
 apps/_dashboard/static/css/no.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/_dashboard/static/css/no.css b/apps/_dashboard/static/css/no.css
index c173819d..3857003d 100644
--- a/apps/_dashboard/static/css/no.css
+++ b/apps/_dashboard/static/css/no.css
@@ -574,7 +574,7 @@ label ~ div {
   position: relative; 
   /* top: -5px; */
   padding: 5px;
-  background-color: hsl(0, 0%, 15%);
+  background-color: hsl(0, 0%, 10%);
   border-radius: 6px;
   min-height: 35px;
   max-height: 150px;

From e8cfa798a3bb122c0e4d016d299bc3b1517c6a8f Mon Sep 17 00:00:00 2001
From: Hadi Zarkoob <hadi.zarkoob114@gmail.com>
Date: Fri, 30 Jan 2026 21:21:11 -0800
Subject: [PATCH 5/5] Vertically align the search buttons

---
 apps/_dashboard/static/css/no.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/_dashboard/static/css/no.css b/apps/_dashboard/static/css/no.css
index 3857003d..c3aa291f 100644
--- a/apps/_dashboard/static/css/no.css
+++ b/apps/_dashboard/static/css/no.css
@@ -610,6 +610,8 @@ nav { width: auto; }
 .dbadmin .grid-table-wrapper { overflow-x: auto; }
 .dbadmin h2 { margin-top: 0px; font-size: 1.5em; }
 .dbadmin .grid-search-form-table { width: 70vw; }
+.dbadmin .grid-search-form-td { vertical-align: middle; }
+.dbadmin .grid-search-form-td input[type="submit"] { margin-top: 0; }
 .dbadmin .grid-search-form-tr:hover { background-color: transparent; }
 .dbadmin td, .dbadmin th { padding: 1px 8px; }
 .dbadmin .grid-table-wrapper { overflow-x: visible; }