Improve layout

Makefile

@@ -3,7 +3,7 @@ APP_NAME=imgfloat
 .PHONY: run test package docker-build docker-run ssl
 
 run:
-	test -f .env && . ./.env; mvn spring-boot:run
+	test -f .env && . ./.env; mvn spring-boot:run -Dspring-boot.run.fork=true
 
 test:
 	mvn test

README.md

@@ -25,6 +25,10 @@ TWITCH_REDIRECT_URI=http://localhost:8080/login/oauth2/code/twitch mvn spring-bo
 ```
 The default server port is `8080`. Log in via `/oauth2/authorization/twitch`. The redirect URI above is what Twitch should be configured to call for local development.
 
+### Hot reload during development
+- The project includes Spring Boot DevTools so Java and Thymeleaf changes trigger a restart automatically when you run `make run` (which now forks the Spring Boot process so devtools can watch the classpath).
+- Static assets under `src/main/resources/static` are refreshed through the built-in LiveReload server from DevTools; install a LiveReload browser extension to automatically reload the overlay or dashboard when CSS/JS files change.
+
 ### Enable TLS locally
 ```bash
 make ssl

pom.xml

@@ -45,6 +45,11 @@
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-websocket</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-devtools</artifactId>
+            <optional>true</optional>
+        </dependency>
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-security</artifactId>

src/main/resources/static/css/styles.css

@@ -604,7 +604,7 @@ body {
     gap: 12px;
     padding: 14px;
     border-radius: 12px;
-    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(59, 130, 246, 0.05));
+    background: rgba(255, 255, 255, 0.02);
     border: 1px solid rgba(124, 58, 237, 0.2);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
@@ -696,7 +696,7 @@ body {
 }
 
 .panel-section {
-    margin-top: 16px;
+    margin-top: 12px;
     padding: 14px;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.02);
@@ -948,8 +948,9 @@ body {
 
 .toggle-track {
     position: relative;
+    align-self: flex-start;
     width: 52px;
-    height: 30px;
+    height: 25px;
     display: inline-flex;
     align-items: center;
     padding: 4px;
@@ -961,8 +962,8 @@ body {
 }
 
 .toggle-thumb {
-    width: 22px;
+    width: 17px;
-    height: 22px;
+    height: 17px;
     border-radius: 999px;
     background: #ffffff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
@@ -971,13 +972,13 @@ body {
 }
 
 .checkbox-inline input[type="checkbox"]:checked + .toggle-track {
-    background: linear-gradient(180deg, #34c759, #28b74b);
+    background: linear-gradient(180deg, #7c3aed, #342366);
-    border-color: #28b74b;
+    border-color: #7c3aed;
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(52, 199, 89, 0.35);
 }
 
 .checkbox-inline input[type="checkbox"]:checked + .toggle-track .toggle-thumb {
-    transform: translateX(22px);
+    transform: translateX(25px);
     box-shadow: 0 2px 6px rgba(40, 183, 75, 0.35), 0 1px 0 rgba(255, 255, 255, 0.6) inset;
 }
 

src/main/resources/templates/admin.html

@@ -59,6 +59,7 @@
                                 <p class="meta-text" id="selected-asset-meta">Pick an asset in the list to adjust its placement and playback.</p>
                                 <div class="badge-row asset-meta-badges" id="selected-asset-badges"></div>
                             </div>
+                                        <!--
                             <div class="selected-asset-actions">
                                 <button type="button" class="ghost icon-button" id="selected-asset-visibility" title="Toggle visibility">
                                     <i class="fa-solid fa-eye-slash"></i><span class="sr-only">Toggle visibility</span>
@@ -66,7 +67,7 @@
                                 <button type="button" class="ghost danger icon-button" id="selected-asset-delete" title="Delete asset">
                                     <i class="fa-solid fa-trash"></i><span class="sr-only">Delete asset</span>
                                 </button>
-                            </div>
+                            </div>-->
                         </div>
                         <div id="asset-controls-placeholder" class="asset-controls-placeholder">
                             <div id="asset-controls" class="hidden asset-settings">
@@ -83,12 +84,14 @@
                                             Height
                                             <input id="asset-height" class="number-input" type="number" min="10" step="5" />
                                         </label>
+                                        <label>
+                                            Maintain AR
                                             <label class="checkbox-inline toggle">
                                                 <input id="maintain-aspect" type="checkbox" checked />
                                                 <span class="toggle-track" aria-hidden="true">
                                                     <span class="toggle-thumb"></span>
                                                 </span>
-                                            <span class="toggle-label">Maintain aspect</span>
+                                            </label>
                                         </label>
                                     </div>
                                     <div class="control-grid condensed">