shelley/ui: make model/dir fields full width on mobile with aligned labels

Philip Zeyliger and Shelley created 1 month ago

Prompt: You may as well make those things full width in mobile and align the labels nicely.

Remove max-width constraints on mobile so the Model and Dir fields
stretch to full width. Right-align labels to a consistent width so
the controls line up neatly.

Co-authored-by: Shelley <[e-mail]>

Change summary

ui/src/styles.css | 10 ++++++++--
1 file changed, 8 insertions(+), 2 deletions(-)

Detailed changes

ui/src/styles.css

@@ -2498,6 +2498,12 @@ svg {
 
   .status-field {
     width: 100%;
+    max-width: none;
+  }
+
+  .status-field-label {
+    width: 2.5rem;
+    text-align: right;
   }
 }
 
@@ -2818,12 +2824,12 @@ svg {
 
   .status-field-model {
     min-width: 120px;
-    max-width: 200px;
+    max-width: none;
   }
 
   .status-field-cwd {
     min-width: 140px;
-    max-width: 250px;
+    max-width: none;
   }
 }