.

frontend/src/app/components/modal/tower-settings.component.ts

@@ -21,10 +21,7 @@ export interface TowerSettingsResult {
   imports: [ReactiveFormsModule, ColorPickerComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div class="header">
-      <div class="exit" (click)="close.emit()" role="button" aria-label="Close"></div>
-      <h2>{{ tower() ? 'Tower settings' : 'New tower' }}</h2>
-    </div>
+    <div class="exit" (click)="close.emit()" role="button" aria-label="Close"></div>
 
     <form [formGroup]="form" (ngSubmit)="onSubmit()">
       <input
@@ -32,12 +29,15 @@ export interface TowerSettingsResult {
         name="towerName"
         type="text"
         formControlName="name"
-        placeholder="Tower name…"
+        [placeholder]="tower() ? 'Tower name…' : 'New tower'"
         maxlength="200"
         autocomplete="off"
+        class="title-input"
       />
 
-      <lt-color-picker [color]="currentColor" (colorChange)="onColorChange($event)" />
+      <div class="picker-row">
+        <lt-color-picker [color]="currentColor" (colorChange)="onColorChange($event)" />
+      </div>
 
       <button type="submit" [disabled]="form.invalid">
         {{ tower() ? 'Save' : 'Create tower' }}
@@ -55,26 +55,41 @@ export interface TowerSettingsResult {
       @include card();
       width: 66vw;
       max-width: 400px;
-      @media (max-width: $mobile-width) { width: 300px; }
+      @media (max-width: $mobile-width) {
+        width: 88vw;
+        max-width: 88vw;
+        padding: var(--medium-padding);
+      }
       box-sizing: border-box;
       padding: var(--large-padding);
+      padding-top: calc(var(--large-padding) + var(--medium-padding));
       position: relative;
       box-shadow: $shadow;
-      @include inner-spacing(var(--large-padding));
       display: block;
 
-      .header {
-        @include center-child();
-
-        .exit {
-          position: absolute;
-          left: var(--large-padding);
-          @include exit();
-        }
+      .exit {
+        position: absolute;
+        top: var(--medium-padding);
+        right: var(--medium-padding);
+        @include exit();
       }
 
-      input[type='text'] {
+      form {
+        @include inner-spacing(var(--large-padding));
+      }
+
+      .title-input {
+        @include title-text();
         text-align: center;
+        width: 100%;
+        background: transparent;
+        border: 0;
+      }
+
+      // Generous gap between the name input and the color picker — the picker
+      // is a substantial control and crowding it against the title looks busy.
+      .picker-row {
+        padding-top: var(--medium-padding);
       }
 
       button {