From ea5732ff8319bc5e15035066eb8372bd65cc94f3 Mon Sep 17 00:00:00 2001
From: Timothy Allen <tim@treehouse.org.za>
Date: Sat, 26 Sep 2026 08:51:48 +0200
Subject: [PATCH] Style the story search on the edit page.

Round the input like the other form inputs, and add space above the list.
---
 publish/choose.inc.php |  8 +++-----
 publish/style.css      | 42 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/publish/choose.inc.php b/publish/choose.inc.php
index 0400492..a7572d3 100644
--- a/publish/choose.inc.php
+++ b/publish/choose.inc.php
@@ -14,13 +14,11 @@ if ($queue) { ?>
 <p>To view already-posted articles, <a href="edit?queue=0">click here</a>.</p>
 <?php  } else { ?>
 <p>To view articles in the queue, <a href="edit?queue=1">click here</a>.</p>
-<div class="input" style="text-align: justify">
-        <form action="" method="get">
-  <input name="search" type="text" class="input" id="search" maxlength="40" value="<?= form_value(get_search_args()) ?>" />
+<form class="story-search" action="" method="get">
+  <input name="search" type="text" maxlength="40" aria-label="Search the stories" value="<?= form_value(get_search_args()) ?>" />
   <input name="queue" type="hidden" value="0" />
-  <button type="submit" id="choose" name="action" value="choose" class="inputbutton">Search</button>
+  <button type="submit" id="choose" name="action" value="choose">Search</button>
 </form>
-</div>
 <?php  }
 echo display_stories();
 ?>
diff --git a/publish/style.css b/publish/style.css
index 733ca3d..5b5fa4e 100644
--- a/publish/style.css
+++ b/publish/style.css
@@ -182,6 +182,40 @@ ul.error-box li {
   top:0.6em;
 }
 
+/* The search box above the list of posted stories in publish/edit */
+#main .story-search {
+  display: flex;
+  gap: 6px;
+  margin: 10px 0 20px;
+}
+#main .story-search input {
+  box-sizing: border-box;
+  width: 300px;
+  min-width: 0;
+  padding: 3px 8px;
+  border: 1px solid #b8c9be;
+  border-radius: 8px;
+  font-size: 12pt;
+}
+#main .story-search input:focus {
+  border-color: #006633;
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(0, 102, 51, 0.15);
+}
+#main .story-search button {
+  padding: 4px 14px;
+  border: 1px solid #006633;
+  border-radius: 6px;
+  background-color: #ffffff;
+  color: #006633;
+  font: bold 11pt "Noto Sans", "Verdana", sans-serif;
+  cursor: pointer;
+}
+#main .story-search button:hover {
+  background-color: #006633;
+  color: #ffffff;
+}
+
 /*
  * Phones: one column, with each label above its input. The inputs, the
  * editor and the image box take the full width, the controls are at
@@ -312,6 +346,14 @@ ul.error-box li {
     gap: 10px;
     margin-top: 18px;
   }
+  #main .story-search input {
+    flex: 1;
+    width: auto;
+    min-height: 44px;
+    padding: 8px 12px;
+    font-size: 16px;
+  }
+  #main .story-search button,
   #main .submission button {
     min-height: 44px;
     margin: 0;