From 1ca893a1873c45aa4cb745d3a91dc5e6f45e4308 Mon Sep 17 00:00:00 2001
From: Sander Bruens <sbruens@users.noreply.github.com>
Date: Tue, 2 Apr 2024 15:26:54 +0100
Subject: [PATCH] Add a section element.

---
 src/www/views/servers_view/index.ts | 43 ++++++++++++++---------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/www/views/servers_view/index.ts b/src/www/views/servers_view/index.ts
index ba953e82874..750a545310e 100644
--- a/src/www/views/servers_view/index.ts
+++ b/src/www/views/servers_view/index.ts
@@ -56,25 +56,23 @@ export class ServerList extends LitElement {
         color: var(--medium-green);
         text-decoration: none;
       }
-      .server-list {
-        width: 100%;
-        height: 100%;
-        margin: auto;
-      }
-      p {
-        margin: 0;
+      section {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
       }
       header {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        justify-content: center;
         line-height: 32px;
-        margin-top: 34px;
         text-align: center;
       }
-      header,
+      h1,
+      h2,
       footer {
         color: rgba(0, 0, 0, 0.54);
-      }
-      h1,
-      h2 {
         margin: 0;
       }
       h1 {
@@ -89,7 +87,6 @@ export class ServerList extends LitElement {
       }
       footer {
         border-top: 1px solid rgba(0, 0, 0, 0.08);
-        margin: 0;
         padding: 24px 0 16px;
         text-align: center;
       }
@@ -98,7 +95,6 @@ export class ServerList extends LitElement {
         border: 0;
         display: flex;
         flex-direction: column;
-        flex: 1;
         justify-content: center;
         outline: none; /* Remove outline for Safari. */
         padding: 0;
@@ -107,8 +103,9 @@ export class ServerList extends LitElement {
         cursor: pointer;
       }
       server-connection-indicator {
-        width: 192px;
         height: 192px;
+        margin-bottom: 34px;
+        width: 192px;
       }
     `,
   ];
@@ -147,15 +144,17 @@ export class ServerList extends LitElement {
   render() {
     if (this.shouldShowZeroState) {
       return html`
-        <button type="button" @click=${this.requestPromptAddServer}>
-          <server-connection-indicator connection-state="disconnected"></server-connection-indicator>
+        <section>
           <header>
-            <h1>${this.localize('server-add')}</h1>
-            <h2>${this.localize('server-add-zero-state-instructions')}</h2>
+            <button type="button" @click=${this.requestPromptAddServer}>
+              <server-connection-indicator connection-state="disconnected"></server-connection-indicator>
+              <h1>${this.localize('server-add')}</h1>
+              <h2>${this.localize('server-add-zero-state-instructions')}</h2>
+            </button>
           </header>
-        </button>
-        <footer>${this.zeroStateContent}</footer>
-        `;
+          <footer>${this.zeroStateContent}</footer>
+        </section>
+      `;
     } else {
       return html`
         <server-list