Move star rating to form heading, remove from field grid

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 20 insertions, 22 deletions

diff --git a/templates/form.html b/templates/form.html
index 23e6d2d..da76f66 100644
--- a/templates/form.html
+++ b/templates/form.html
@@ -4,11 +4,6 @@
 
 {% block content %}
   <section class="form-shell">
-    <div class="form-heading">
-      <p class="eyebrow">Diary Entry</p>
-      <h1>{{ page_title }}</h1>
-    </div>
-
     {% if error %}
       <div class="notice error">{{ error }}</div>
     {% endif %}
@@ -25,6 +20,26 @@
     <form class="film-form" method="post" action="{{ action }}">
       <input id="tmdb_id" name="tmdb_id" type="hidden" value="{{ film.tmdb_id if film and film.tmdb_id else '' }}">
 
+      <div class="form-heading">
+        <div>
+          <p class="eyebrow">Diary Entry</p>
+          <h1>{{ page_title }}</h1>
+        </div>
+        {% set current_stars = film.stars if film and film.stars else 0 %}
+        <input type="hidden" id="stars" name="stars" value="{{ current_stars }}">
+        <div class="star-control" role="group" aria-label="Rate film" data-form-stars data-current-stars="{{ current_stars }}">
+          {% for value in range(1, 4) %}
+            <button
+              type="button"
+              class="star-button {% if current_stars >= value %}is-active{% endif %}"
+              data-stars="{{ value }}"
+              aria-label="{{ value }} star{% if value > 1 %}s{% endif %}"
+              aria-pressed="{% if current_stars >= value %}true{% else %}false{% endif %}"
+            >✦</button>
+          {% endfor %}
+        </div>
+      </div>
+
       <div class="form-grid">
         <div class="field span-2">
           <label for="title">Display title</label>
@@ -82,23 +97,6 @@
           </select>
         </div>
 
-        <div class="field">
-          <label>Stars</label>
-          {% set current_stars = film.stars if film and film.stars else 0 %}
-          <input type="hidden" id="stars" name="stars" value="{{ current_stars }}">
-          <div class="star-control" role="group" aria-label="Rate film" data-form-stars data-current-stars="{{ current_stars }}">
-            {% for value in range(1, 4) %}
-              <button
-                type="button"
-                class="star-button {% if current_stars >= value %}is-active{% endif %}"
-                data-stars="{{ value }}"
-                aria-label="{{ value }} star{% if value > 1 %}s{% endif %}"
-                aria-pressed="{% if current_stars >= value %}true{% else %}false{% endif %}"
-              >✦</button>
-            {% endfor %}
-          </div>
-        </div>
-
         <div class="field checkbox-field">
           <label class="check-label" for="rewatch">
             <input id="rewatch" name="rewatch" type="checkbox" value="on" {% if film and film.rewatch %}checked{% endif %}>