From 862edbf4d5fdb9a88f84bfa1d51ab8cc83896094 Mon Sep 17 00:00:00 2001
From: erdgeist <erdgeist@erdgeist.org>
Date: Thu, 13 Aug 2026 01:11:29 +0200
Subject: Give every admin page one horizontal gutter

by many views inside. The inner ones are gone

nodes#edit's becomes #body_field, which is what #edit_grid places in its
full-width row.

Rows now reach into the label band themselves rather than depending on a
page wrapper to do it. The label column plus its gap equals the escape, so
a row's content starts at the gutter on every page; #edit_grid's rows are
exempt because the grid already steps back.

share one left edge. #new_node's -118px was compensating for that 10px and
left the page 7px out once it went. standalone_action_bar was overridden
everywhere it appeared.

page_translations#edit no longer uses #edit_grid: it has no metadata column,
so the two-column template pushed its abstract into the empty half.

nodes#edit's lower action bar was inside #edit_grid, so it was a grid item
inheriting the escape and sat 125px left of the form above it.
---
 public/stylesheets/admin.css | 62 +++++++++++++++-----------------------------
 1 file changed, 21 insertions(+), 41 deletions(-)

(limited to 'public')

diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 7e0be004..a36ece5b 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -143,16 +143,6 @@ input[type=radio] {
   #wrapper {
     margin: 0 125px;
   }
-
-  .standalone_action_bar {
-    margin-left: -125px;
-  }
-}
-
-#metadata,
-#content,
-#main_fields {
-  margin-left: 5px;
 }
 
 #metadata_details summary {
@@ -230,7 +220,6 @@ input[type=radio] {
   border-left: 3px solid var(--text-muted);
   background-color: var(--surface-tint);
   margin-bottom: 20px;
-  margin-left: 5px;
 }
 
 #flash span {
@@ -857,7 +846,7 @@ form.button_to svg  {
   .events_table .title_with_flags { grid-area: title; }
   .assets_table .asset_thumb_link { grid-area: thumb; }
   .assets_table .asset_type       { grid-area: type; align-self: end; }
-  .events_table .when_body       { grid-area: when; margin-top: 0.4rem; padding-left: 2rem; }
+  .events_table .when_body        { grid-area: when; margin-top: 0.4rem; padding-left: 2rem; }
   .assets_table .asset_name       { grid-area: name; margin-top: 0.4rem; }
   .assets_table .asset_file       { grid-area: file; }
 
@@ -1009,31 +998,33 @@ form.button_to svg  {
    Node display (nodes#show / nodes#new)
    ============================================================ */
 
-div.layout_row_label {
+.layout_row {
+  margin-bottom: 1rem;
+}
+
+.layout_row_label {
   min-height: 2rem;
   text-transform: lowercase;
-  vertical-align: top;
 }
 
-div.layout_row_content {
+.layout_row_content {
   min-height: 2rem;
-  margin-bottom: 1rem;
 }
 
 @media(min-width:1016px) {
-  div.layout_row_label {
-    float: left;
-    width: 110px;
-    text-align: right;
+  .layout_row {
+    display: grid;
+    grid-template-columns: 115px 1fr;
+    column-gap: 10px;
+    margin-left: -125px;
   }
 
-  div.layout_row_content {
-    margin-left: 120px;
-    display: block;
+  #edit_grid .layout_row {
+    margin-left: 0;
   }
 
-  .body_toolbar_row {
-    margin-left: 120px;
+  .layout_row_label {
+    text-align: right;
   }
 }
 
@@ -1239,7 +1230,7 @@ div.layout_row_content {
 }
 
 .link_matrix_locale {
-  font-size: var(--text-xs);
+  font-size: var(--text-sm);
   font-variant: all-small-caps;
   letter-spacing: 0.06em;
   color: var(--text);
@@ -1460,17 +1451,13 @@ div.layout_row_content {
     align-items: start;
     margin-left: -125px;
   }
-  #main_fields       { grid-area: main; }
-  #metadata_details  { grid-area: meta; }
-  #admin_layout #content { grid-area: body; }
+  #main_fields           { grid-area: main; }
+  #metadata_details      { grid-area: meta; }
+  #edit_grid #body_field { grid-area: body; }
 
   /* Details is force-opened by JS on desktop; hide the summary only
      once open, so a JS failure still leaves a working toggle. */
   #metadata_details[open] > summary { display: none; }
-
-  #new_node {
-    margin-left: -118px;
-  }
 }
 
 input[type=text]#tag_list,
@@ -1480,8 +1467,7 @@ input#move_to_search_term {
 }
 
 div#admin_layout {
-  margin-top: 0px;
-  margin-left: 10px;
+  margin-top: 0;
 }
 
 #admin_layout a.action_button,
@@ -1545,12 +1531,6 @@ input[type=text]#page_title {
   height: 60vh;
 }
 
-#admin_layout #content,
-#admin_layout #metadata,
-#admin_layout #main_fields {
-  padding-right: 5px;
-}
-
 input#tag_list,
 input#page_slug,
 input#move_to_search_term {
-- 
cgit v1.3