From 2d3c427213288d71ad2e4201fff512b1ea7553d3 Mon Sep 17 00:00:00 2001
From: Simon Willison <swillison@gmail.com>
Date: Tue, 14 Jul 2026 08:10:29 -0700
Subject: [PATCH] Share permission form control styles

---
 .../templates/_permission_ui_styles.html      | 44 +++++++++++++-----
 datasette/templates/allow_debug.html          | 12 ++---
 datasette/templates/debug_check.html          | 45 +------------------
 3 files changed, 39 insertions(+), 62 deletions(-)

diff --git a/datasette/templates/_permission_ui_styles.html b/datasette/templates/_permission_ui_styles.html
index 53a824f1..254b2114 100644
--- a/datasette/templates/_permission_ui_styles.html
+++ b/datasette/templates/_permission_ui_styles.html
@@ -6,8 +6,11 @@
     padding: 1.5em;
     margin-bottom: 2em;
 }
+.permission-form form {
+    max-width: 60rem;
+}
 .form-section {
-    margin-bottom: 1em;
+    margin-bottom: 1.25em;
 }
 .form-section label {
     display: block;
@@ -15,22 +18,43 @@
     font-weight: bold;
 }
 .form-section input[type="text"],
-.form-section select {
-    width: 100%;
-    max-width: 500px;
-    padding: 0.5em;
+.form-section select,
+.permission-textarea {
+    background-color: #fff;
+    border: 1px solid #aaa;
+    border-radius: 4px;
     box-sizing: border-box;
-    border: 1px solid #ccc;
-    border-radius: 3px;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
+    color: #222;
+    font-family: inherit;
+    font-size: 1rem;
+    line-height: 1.4;
+    max-width: none;
+    width: 100%;
+}
+.form-section input[type="text"] {
+    padding: 0.6rem 0.75rem;
+}
+.form-section select {
+    min-height: 2.75rem;
+    padding: 0.6rem 0.75rem;
+}
+.permission-textarea {
+    font-family: monospace;
+    min-height: 12rem;
+    padding: 0.75rem;
+    resize: vertical;
 }
 .form-section input[type="text"]:focus,
-.form-section select:focus {
-    outline: 2px solid #0066cc;
+.form-section select:focus,
+.permission-textarea:focus {
     border-color: #0066cc;
+    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.18);
+    outline: none;
 }
 .form-section small {
     display: block;
-    margin-top: 0.3em;
+    margin-top: 0.45em;
     color: #666;
 }
 .form-actions {
diff --git a/datasette/templates/allow_debug.html b/datasette/templates/allow_debug.html
index 1ecc92df..86ab13a3 100644
--- a/datasette/templates/allow_debug.html
+++ b/datasette/templates/allow_debug.html
@@ -3,14 +3,8 @@
 {% block title %}Debug allow rules{% endblock %}
 
 {% block extra_head %}
+{% include "_permission_ui_styles.html" %}
 <style>
-textarea {
-    height: 10em;
-    width: 95%;
-    box-sizing: border-box;
-    padding: 0.5em;
-    border: 2px dotted black;
-}
 .two-col {
     display: inline-block;
     width: 48%;
@@ -41,11 +35,11 @@ p.message-warning {
 <form class="core" action="{{ urls.path('-/allow-debug') }}" method="get" style="margin-bottom: 1em">
     <div class="two-col">
         <p><label>Allow block</label></p>
-        <textarea name="allow">{{ allow_input }}</textarea>
+        <textarea class="permission-textarea" name="allow">{{ allow_input }}</textarea>
     </div>
     <div class="two-col">
         <p><label>Actor</label></p>
-        <textarea name="actor">{{ actor_input }}</textarea>
+        <textarea class="permission-textarea" name="actor">{{ actor_input }}</textarea>
     </div>
     <div style="margin-top: 1em;">
         <input type="submit" value="Apply allow block to actor">
diff --git a/datasette/templates/debug_check.html b/datasette/templates/debug_check.html
index 788f1bf4..b9fc636a 100644
--- a/datasette/templates/debug_check.html
+++ b/datasette/templates/debug_check.html
@@ -7,47 +7,6 @@
 {% include "_permission_ui_styles.html" %}
 {% include "_debug_common_functions.html" %}
 <style>
-.permission-check-form form {
-    max-width: 60rem;
-}
-.permission-check-form .form-section {
-    margin-bottom: 1.25em;
-}
-.permission-check-form .form-section select,
-.permission-check-form .form-section input[type="text"],
-#actor {
-    background-color: #fff;
-    border: 1px solid #aaa;
-    border-radius: 4px;
-    box-sizing: border-box;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
-    color: #222;
-    font-family: inherit;
-    font-size: 1rem;
-    line-height: 1.4;
-    max-width: none;
-    width: 100%;
-}
-.permission-check-form .form-section select {
-    min-height: 2.75rem;
-    padding: 0.6rem 0.75rem;
-}
-#actor {
-    font-family: monospace;
-    min-height: 12rem;
-    padding: 0.75rem;
-    resize: vertical;
-}
-.permission-check-form .form-section select:focus,
-.permission-check-form .form-section input[type="text"]:focus,
-#actor:focus {
-    border-color: #0066cc;
-    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.18);
-    outline: none;
-}
-.permission-check-form .form-section small {
-    margin-top: 0.45em;
-}
 #output {
     margin-top: 2em;
     padding: 1em;
@@ -154,11 +113,11 @@
 
 <p>Test an actor, action and resource. The result explains which rules matched, which specificity level won, and whether actor restrictions or required actions changed the verdict.</p>
 
-<div class="permission-form permission-check-form">
+<div class="permission-form">
     <form id="check-form" method="get" action="{{ urls.path('-/check') }}">
         <div class="form-section">
             <label for="actor">Actor JSON:</label>
-            <textarea id="actor" name="actor">{{ actor_json }}</textarea>
+            <textarea class="permission-textarea" id="actor" name="actor">{{ actor_json }}</textarea>
             <small>Use <code>null</code> for an anonymous actor. This actor is simulated; it does not change who you are signed in as.</small>
         </div>