Make welcome content more readable

veyndan · veyndan · commit 556dcd03094c · 2025-11-02T13:42:51.000+01:00
diff --git a/webextension/css/welcome.css b/webextension/css/welcome.css
@@ -30,15 +30,21 @@ header {
     text-align: center;
 }
 
+main, .bottom {
+    max-inline-size: min(60ch, 100%);
+    margin-inline: auto;
+    padding-inline: 16px;
+}
+
 main {
-    margin: 2em 15vw 10vh 15vw;
+    margin-block: 2em 10vh;
     padding-bottom: 5em;
 }
 
 .bottom-container {
     position: fixed;
     margin: 0;
-    padding: 0.5em 15vw 0.5em 15vw;
+    padding-block: 0.5em;
     bottom: 0;
     left: 0;
     right: 0;
diff --git a/webextension/welcome.html b/webextension/welcome.html
@@ -3,6 +3,7 @@
   <head>
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
     <meta content="utf-8" http-equiv="encoding">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
     <link rel="stylesheet" type="text/css" href="css/common.css">
     <link rel="stylesheet" type="text/css" href="css/welcome.css">
@@ -71,12 +72,14 @@ <h4>
       </main>
 
       <div class="bottom-container">
-        <button type="submit" name="accept-terms" id="accept-btn" class="btn btn-auto btn-blue">
-          <span>Accept and Enable</span>
-        </button>
-        <button type="submit" name="decline-terms" id="decline-btn" class="btn btn-auto btn-dark-gray">
-          <span>Cancel</span>
-        </button>
+        <div class="bottom">
+          <button type="submit" name="accept-terms" id="accept-btn" class="btn btn-auto btn-blue">
+            <span>Accept and Enable</span>
+          </button>
+          <button type="submit" name="decline-terms" id="decline-btn" class="btn btn-auto btn-dark-gray">
+            <span>Cancel</span>
+          </button>
+        </div>
       </div>
 
     </div>
