Refactor UI CSS

biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.6.3/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.6.4/schema.json",
   "vcs": {
     "enabled": true,
     "clientKind": "git",

internal/service/static/css/main.css

@@ -86,8 +86,7 @@ body {
   height: 100dvh;
   max-width: calc(var(--measure) + var(--s3) * 2);
   margin-inline: auto;
-  padding: var(--s0);
-  padding-bottom: 0;
+  padding: 0 var(--s0);
 }
 
 /* ==================== */
@@ -102,7 +101,8 @@ body {
   padding: var(--s1);
   background: var(--color-surface);
   border: 1px solid var(--color-border-light);
-  border-radius: var(--radius);
+  border-top: none;
+  border-radius: 0 0 var(--radius) var(--radius);
 }
 
 .chat > * + * {
@@ -253,21 +253,6 @@ body {
   gap: 0.125rem;
 }
 
-.compose__model {
-  padding: 0 var(--s-1);
-  font-size: 0.7rem;
-  font-family: var(--font-mono);
-  color: var(--color-text-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1;
-}
-
-.compose__model:empty {
-  display: none;
-}
-
 .compose__attachment {
   display: flex;
   align-items: center;
@@ -352,10 +337,25 @@ body {
 /* ==================== */
 
 .footer {
-  margin-top: var(--s0);
   background: var(--color-bg);
 }
 
+.footer__status {
+  padding: var(--s-2) var(--s-1);
+  font-size: 0.7rem;
+  font-family: var(--font-mono);
+  font-style: italic;
+  color: var(--color-text);
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.footer__status[hidden] {
+  display: none;
+}
+
 .footer__select {
   height: 2rem;
   padding: 0 var(--s-1);
@@ -376,15 +376,14 @@ body {
 }
 
 .footer__toolbar {
-  border-inline: none;
-  border-bottom: none;
   display: flex;
   align-items: center;
   gap: var(--s-2);
   padding: var(--s-2);
   background: var(--color-surface);
   border: 1px solid var(--color-border-light);
-  border-radius: var(--radius);
+  border-bottom: none;
+  border-radius: var(--radius) var(--radius) 0 0;
 }
 
 .footer__toolbar-btn {
@@ -863,7 +862,6 @@ body {
 @media (max-width: 639px) {
   .container {
     padding: 0;
-    padding-top: var(--s-1);
   }
 
   .chat {
@@ -872,7 +870,6 @@ body {
   }
 
   .footer {
-    margin-top: var(--s-1);
     padding-bottom: 0;
   }
 

internal/service/static/js/ui.js

@@ -820,14 +820,15 @@ export class UI {
 
   /**
    * _updateComposeModelLabel sets the text and hover title of the
-   * compose bar's model indicator to the active provider/model.
+   * footer status bar's model indicator to the active provider and model.
    * @private
    */
   _updateComposeModelLabel() {
     const { provider, model } = this.getSelectedModel();
-    const label = provider && model ? `${provider}/${model}` : '';
+    const label = provider && model ? `${provider} • ${model}` : '';
     this.$composeModelLabel.textContent = label;
     this.$composeModelLabel.title = label;
+    this.$composeModelLabel.hidden = !label;
   }
 
   /**

internal/service/templates/static/footer/compose.gohtml

@@ -35,7 +35,6 @@
         >
           <svg class="icon"><use href="/static/icons.svg#location"></use></svg>
         </button>
-        <span class="compose__model" id="compose-model-label"></span>
       </div>
       <input type="file" id="file-input" multiple hidden />
       <div class="compose__actions-right">

internal/service/templates/static/footer/footer.gohtml

@@ -1,5 +1,6 @@
 {{ define "footer" }}
   <footer class="footer">
+    <div class="footer__status" id="compose-model-label" hidden></div>
     {{ template "footer/compose" . }}
     {{ template "footer/toolbar" . }}
   </footer>