From db8e2bbc6a4d7de560ffbff8ef0772d725a6f7ab Mon Sep 17 00:00:00 2001
From: joshuaboud <joshuaboud@hotmail.com>
Date: Fri, 28 May 2021 12:53:47 -0300
Subject: [PATCH] fix grid alignment for permission checkboxes

---
 navigator/navigator.css  | 21 ++++++++++++++++++---
 navigator/navigator.html |  6 +++---
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/navigator/navigator.css b/navigator/navigator.css
index d0e4ff3..ed21450 100644
--- a/navigator/navigator.css
+++ b/navigator/navigator.css
@@ -257,15 +257,30 @@ input[type="text"] {
 	flex: 3;
 }
 
+.nav-property-pair > input[type="text"] {
+	flex-grow: 3;
+	flex-basis: 0;
+	padding: 0px 12px 0px 12px;
+}
+
 .grid-container {
-	margin: 0 0 2px 42px;
+	margin: 0 24px 2px 24px;
 	display: grid;
-	grid-template-columns: auto auto auto auto;
-	justify-content: space-evenly;
+	grid-template-columns: 2fr 1fr 1fr 1fr;
+	justify-items: center;
+	row-gap: 4px;
 }
 
 .grid-label {
 	font-weight: bold;
+	flex-basis: 0;
+	font-size: 90%;
+}
+
+.grid-row-label {
+	justify-self: start;
+	padding-right: 5px;
+	padding-left: 50%;
 }
 
 .nav-btn-group {
diff --git a/navigator/navigator.html b/navigator/navigator.html
index 89c6cc2..322fd70 100644
--- a/navigator/navigator.html
+++ b/navigator/navigator.html
@@ -107,15 +107,15 @@
 						<div class="grid-label">Read</div>
 						<div class="grid-label">Write</div>
 						<div class="grid-label">Execute</div>
-						<div class="grid-label">Owner</div>
+						<div class="grid-label grid-row-label">Owner</div>
 						<input type="checkbox" class="mode-checkbox" id="owner-read"></input>
 						<input type="checkbox" class="mode-checkbox" id="owner-write"></input>
 						<input type="checkbox" class="mode-checkbox" id="owner-exec"></input>
-						<div class="grid-label">Group</div>
+						<div class="grid-label grid-row-label">Group</div>
 						<input type="checkbox" class="mode-checkbox" id="group-read"></input>
 						<input type="checkbox" class="mode-checkbox" id="group-write"></input>
 						<input type="checkbox" class="mode-checkbox" id="group-exec"></input>
-						<div class="grid-label">Other</div>
+						<div class="grid-label grid-row-label">Other</div>
 						<input type="checkbox" class="mode-checkbox" id="other-read"></input>
 						<input type="checkbox" class="mode-checkbox" id="other-write"></input>
 						<input type="checkbox" class="mode-checkbox" id="other-exec"></input>