Fix alignment on width-constrained devices

Amolith created

Change summary

templates/home_authenticated.html | 24 ++++++++++++++----------
1 file changed, 14 insertions(+), 10 deletions(-)

Detailed changes

templates/home_authenticated.html 🔗

@@ -23,8 +23,8 @@
              margin: 0 auto;
              display: flex;
              flex-direction: column;
-             align-items: center;
-             max-width: 580px;
+             justify-content: center;
+             max-width: 650px;
          }
          .title {
              font-size: 50px;
@@ -70,8 +70,7 @@
          table {
              margin-top: 50px;
              text-align: center;
-             overflow-x: scroll;
-             display: block;
+             margin: auto;
          }
          tr:nth-child(even) {
              background-color: #2B2B2B;
@@ -81,6 +80,9 @@
          td {
              padding: 10px;
          }
+         .links_table {
+             overflow: scroll;
+         }
         </style>
     </head>
     <body>
@@ -97,11 +99,13 @@
             <input type="text" id="action" name="action" value="create" hidden="">
             <input class="button" type="submit" formaction="/?action=create" value="Shorten URL">
         </form>
-        <table>
-            <th>Short link</th>
-            <th>Long link</th>
-            <th>Actions</th>
-            {{ . }}
-        </table>
+        <div class="links_table">
+            <table>
+                <th>Short link</th>
+                <th>Long link</th>
+                <th>Actions</th>
+                {{ . }}
+            </table>
+        </div>
     </body>
 </html>