From 0cc153bb699f0153ed42f619c4bca9820b49a49a Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Sat, 9 May 2026 01:27:40 -0700
Subject: Move star rating to form heading, remove from field grid

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/styles.css   | 13 ++++++++++++-
 templates/form.html | 42 ++++++++++++++++++++----------------------
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index 24340e7..480ace0 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -148,11 +148,22 @@ button:hover {
   color: var(--text);
 }
 
-.page-heading,
+.page-heading {
+  padding: 48px 0 26px;
+}
+
 .form-heading {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
   padding: 48px 0 26px;
 }
 
+.form-heading .star-button {
+  font-size: 1.6rem;
+  width: 1.4em;
+}
+
 .page-heading-row,
 .stats-panel-header {
   display: flex;
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 %}>
-- 
cgit v1.3-2-g0d8e