From 0f0c6cfbae5f75f9bbcab6fb93a51ae9d8c8ec23 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Wed, 7 Jul 2021 22:15:52 +0200
Subject: [PATCH] Fixed sessions tab for mobile devices

---
 src/pages/settings/panes/Panes.module.scss | 16 +++++++
 src/pages/settings/panes/Sessions.tsx      | 49 ++++++++++++----------
 2 files changed, 44 insertions(+), 21 deletions(-)

diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss
index c807ddad..5e02383e 100644
--- a/src/pages/settings/panes/Panes.module.scss
+++ b/src/pages/settings/panes/Panes.module.scss
@@ -312,6 +312,22 @@
         display: flex;
         align-items: center;
         gap: 12px;
+        flex-direction: row;
+
+        .flextest {
+            display: flex;
+            gap: 12px;
+            flex-grow: 1;
+        }
+
+        @media only screen and (max-width: 900px) {
+            align-items: unset;
+            flex-direction: column;
+
+            > button {
+                width: 100%;
+            }
+        }
     }
 
     .entry {
diff --git a/src/pages/settings/panes/Sessions.tsx b/src/pages/settings/panes/Sessions.tsx
index 489dea95..ffd60a97 100644
--- a/src/pages/settings/panes/Sessions.tsx
+++ b/src/pages/settings/panes/Sessions.tsx
@@ -128,29 +128,35 @@ export function Sessions() {
                         </span>
                     )}
                     <div className={styles.session}>
-                        <div className={styles.icon}>
-                            {getIcon(session)}
-                            <div>{getSystemIcon(session)}</div>
-                        </div>
-                        <div className={styles.info}>
-                            <input
-                                type="text"
-                                className={styles.name}
-                                value={session.friendly_name}
-                                autocomplete="off"
-                            />
-                            <span className={styles.time}>
-                                <Text
-                                    id="app.settings.pages.sessions.created"
-                                    fields={{
-                                        time_ago: dayjs(
-                                            session.timestamp,
-                                        ).fromNow(),
-                                    }}
+                        <div className={styles.flextest}>
+                            <div className={styles.icon}>
+                                {getIcon(session)}
+                                <div>{getSystemIcon(session)}</div>
+                            </div>
+                            <div className={styles.info}>
+                                <input
+                                    type="text"
+                                    className={styles.name}
+                                    value={session.friendly_name}
+                                    autocomplete="off"
                                 />
-                            </span>
+                                <span className={styles.time}>
+                                    <Text
+                                        id="app.settings.pages.sessions.created"
+                                        fields={{
+                                            time_ago: dayjs(
+                                                session.timestamp,
+                                            ).fromNow(),
+                                        }}
+                                    />
+                                </span>
+                        
+                        
+                            </div>
                         </div>
-                        {deviceId !== session.id && (
+                            
+
+                            {deviceId !== session.id && (
                             <Button
                                 onClick={async () => {
                                     setDelete([
@@ -173,6 +179,7 @@ export function Sessions() {
                                 <Text id="app.settings.pages.logOut" />
                             </Button>
                         )}
+                        
                     </div>
                 </div>
             ))}