From bc2553f8566bca034a352e08e4e98991a871d3c5 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Mon, 19 Jun 2023 13:55:17 +0530
Subject: [PATCH] Improve layout on mobile

---
 src/platform/web/ui/css/layout.css                       | 8 ++++++++
 src/platform/web/ui/css/themes/element/theme.css         | 9 +++++----
 .../web/ui/session/room/timeline/VerificationTileView.ts | 2 +-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/platform/web/ui/css/layout.css b/src/platform/web/ui/css/layout.css
index a0f42b01..f7fbe732 100644
--- a/src/platform/web/ui/css/layout.css
+++ b/src/platform/web/ui/css/layout.css
@@ -101,6 +101,14 @@ the layout viewport up without resizing it when the keyboard shows */
     .middle .close-middle { display: block !important; }
     /* hide grid button */
     .LeftPanel .grid { display: none !important; }
+
+    .VerificationReadyTileView {
+        flex-direction: column;
+    }
+
+    .VerificationTileView__actions {
+        justify-content: center;
+    }
 }
 
 .LeftPanel {
diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index efd1bc08..728afcc4 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -1535,6 +1535,7 @@ button.RoomDetailsView_row::after {
     font-size: 1.4rem;
     color: var(--text-color);
     gap: 4px;
+    text-align: center;
 }
 
 .VerificationInProgressTileView,
@@ -1542,7 +1543,7 @@ button.RoomDetailsView_row::after {
 .VerificationCancelledTileView,
 .VerificationReadyTileView {
     background: var(--background-color-primary--darker-5);
-    padding: 12px;
+    padding: 8px;
     box-sizing: border-box;
     border-radius: 8px;
 }
@@ -1550,18 +1551,18 @@ button.RoomDetailsView_row::after {
 .VerificationTileView {
     display: flex;
     justify-content: center;
-    padding: 16px;
+    padding: 5px 10%;
     box-sizing: border-box;
 }
 
 
 .VerificationInProgressTileView .VerificationTileView__shield,
 .VerificationReadyTileView .VerificationTileView__shield {
-    background: url("./icons/e2ee-normal.svg?primary=background-color-secondary--darker-40");
+    background: url("./icons/e2ee-normal.svg?primary=background-color-secondary--darker-40") no-repeat;
 }
 
 .VerificationCompletedTileView .VerificationTileView__shield {
-    background: url("./icons/e2ee-normal.svg?primary=accent-color");
+    background: url("./icons/e2ee-normal.svg?primary=accent-color") no-repeat;
 }
 
 .VerificationTileView__shield {
diff --git a/src/platform/web/ui/session/room/timeline/VerificationTileView.ts b/src/platform/web/ui/session/room/timeline/VerificationTileView.ts
index 56e50211..7138de55 100644
--- a/src/platform/web/ui/session/room/timeline/VerificationTileView.ts
+++ b/src/platform/web/ui/session/room/timeline/VerificationTileView.ts
@@ -52,8 +52,8 @@ export class VerificationTileView extends TemplateView<VerificationTile> {
 class VerificationReadyTileView extends TemplateView<VerificationTile> {
     render(t: Builder<VerificationTile>, vm: VerificationTile) {
         return t.div({ className: "VerificationReadyTileView" }, [
+            t.div({ className: "VerificationTileView__shield" }),
             t.div({ className: "VerificationTileView__description" }, [
-                t.div({ className: "VerificationTileView__shield" }),
                 t.div(vm.description)
             ]),
             t.div({ className: "VerificationTileView__actions" }, [