Layout fixes

README.md

@@ -88,6 +88,40 @@ This live-container approach is not persistent: `docker compose up --force-recre
 
 After either deployment method, hard-refresh the browser or clear its cache. If the old appearance remains, inspect the browser network panel to confirm that `/skins/eternity/styles/styles.css` returns HTTP 200.
 
+If instead the page looks entirely unstyled — login credential fields stacked in the wrong place, an oversized logo, or mailbox toolbars/tabs scattered and hard to read — `styles/styles.css` is loading but its `@import` of `../../elastic/styles/styles.css` is not, so none of Elastic's layout rules apply. Confirm that file exists and is readable:
+
+```sh
+docker exec roundcube sh -c 'test -f /var/www/html/skins/elastic/styles/styles.css && echo FOUND || echo MISSING'
+```
+
+If it is `MISSING`, the Elastic skin was installed from source without its LESS files being compiled (Elastic ships as `.less` sources and requires `make css-elastic` / `bin/updatecss.sh` to produce `styles/styles.css`). Reinstall Elastic from an official Roundcube release tarball, which ships the compiled CSS, rather than a bare git checkout.
+
+### Verify A Running Container
+
+Run these commands on the Docker host, replacing `roundcube` with the container name or ID from `docker ps`. They distinguish an installation issue from an activation issue:
+
+```sh
+docker exec roundcube sh -c 'for file in /var/www/html/skins/eternity/meta.json /var/www/html/skins/eternity/styles/styles.css /var/www/html/skins/elastic/styles/styles.css; do test -f "$file" && echo "FOUND $file" || echo "MISSING $file"; done'
+docker exec roundcube sh -c 'grep -RIn "\$config\[.skin.\]" /var/roundcube/config /var/www/html/config 2>/dev/null || true'
+```
+
+The first command must report all three paths as `FOUND`. The second must show `eternity` as the configured skin. On the official image, the equivalent persistent environment setting is:
+
+```yaml
+environment:
+	ROUNDCUBEMAIL_SKIN: eternity
+```
+
+Roundcube can store a skin preference for each user. A user who previously selected another appearance may continue to receive that preference instead of the newly configured default. Sign out and test in a private browser window or select **Eternity** from Roundcube's **Settings > Preferences > User Interface > Interface skin**, when the preference is available.
+
+For a browser-level check, open this URL directly, replacing the hostname with the Roundcube site:
+
+```text
+https://webmail.example.com/skins/eternity/styles/styles.css
+```
+
+It must return CSS beginning with `@import url("../../elastic/styles/styles.css");`. A `404` means the skin is not mounted at the path served by the container. If it returns `200` but Roundcube still looks unchanged, inspect the mailbox page source: it must include a stylesheet URL containing `/skins/eternity/styles/styles.css`. If it instead contains `/skins/elastic/`, the active configuration or the user's stored preference still selects Elastic.
+
 ## Structure
 
 ```text

eternity/styles/styles.css

@@ -80,15 +80,42 @@ body .link:hover,
 }
 
 #logo {
+  max-height: 100px;
+  max-width: 100%;
   font-family: var(--font-family-monospace);
   font-weight: 500;
   letter-spacing: 1px;
 }
 
-#taskmenu,
+/* Guard the login layout in case the parent Elastic stylesheet did not load
-#taskmenu .action-buttons,
+   (e.g. it was not compiled/built), so credentials never render unstyled. */
-#layout-menu .menu,
+body.task-login #layout {
-.toolbar,
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+body.task-login #layout-content {
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+
+body.task-login #logo {
+  display: inline-block;
+  position: relative;
+  top: 16vh;
+  max-height: 100px;
+}
+
+#login-form {
+  position: relative;
+  top: 20vh;
+  width: 95%;
+  max-width: 320px;
+  margin: 0 auto;
+}
+
 #messagelist-header,
 #directorylist-header {
   font-family: var(--font-family-monospace);
@@ -96,10 +123,22 @@ body .link:hover,
   letter-spacing: 0.3px;
 }
 
+#taskmenu,
+#taskmenu .action-buttons,
+#layout-menu .menu,
+.toolbar {
+  font-family: var(--font-family-monospace);
+  letter-spacing: 0.2px;
+}
+
 #taskmenu .action-buttons a,
 #taskmenu a,
-#layout-menu .menu a {
+#layout-menu .menu a,
+.toolbar a.button {
   border-radius: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 #taskmenu .action-buttons a.selected,