From 0cb81572a01bf53d92f43178025e2302cfb6818e Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Thu, 24 Aug 2023 19:10:57 +0200
Subject: [PATCH] fix(Settings): layout issue with user info on mobile

---
 src/routes/Settings/Settings.js |  48 ++++++++-------
 src/routes/Settings/styles.less | 102 ++++++++++++++++++--------------
 2 files changed, 82 insertions(+), 68 deletions(-)

diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js
index c90d37ef9..2a2fdf721 100644
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@@ -202,32 +202,34 @@ const Settings = () => {
                 <div ref={sectionsContainerRef} className={styles['sections-container']} onScroll={sectionsContainerOnScorll}>
                     <div ref={generalSectionRef} className={styles['section-container']}>
                         <div className={classnames(styles['option-container'], styles['user-info-option-container'])}>
-                            <div
-                                className={styles['avatar-container']}
-                                style={{
-                                    backgroundImage: profile.auth === null ?
-                                        `url('${require('/images/anonymous.png')}')`
-                                        :
-                                        profile.auth.user.avatar ?
-                                            `url('${profile.auth.user.avatar}')`
+                            <div className={styles['user-info-content']}>
+                                <div
+                                    className={styles['avatar-container']}
+                                    style={{
+                                        backgroundImage: profile.auth === null ?
+                                            `url('${require('/images/anonymous.png')}')`
                                             :
-                                            `url('${require('/images/default_avatar.png')}')`
-                                }}
-                            />
-                            <div className={styles['email-logout-container']}>
-                                <div className={styles['email-label-container']} title={profile.auth === null ? 'Anonymous user' : profile.auth.user.email}>
-                                    <div className={styles['email-label']}>
-                                        {profile.auth === null ? 'Anonymous user' : profile.auth.user.email}
+                                            profile.auth.user.avatar ?
+                                                `url('${profile.auth.user.avatar}')`
+                                                :
+                                                `url('${require('/images/default_avatar.png')}')`
+                                    }}
+                                />
+                                <div className={styles['email-logout-container']}>
+                                    <div className={styles['email-label-container']} title={profile.auth === null ? 'Anonymous user' : profile.auth.user.email}>
+                                        <div className={styles['email-label']}>
+                                            {profile.auth === null ? 'Anonymous user' : profile.auth.user.email}
+                                        </div>
                                     </div>
+                                    {
+                                        profile.auth !== null ?
+                                            <Button className={styles['logout-button-container']} title={ t('LOG_OUT') } onClick={logoutButtonOnClick}>
+                                                <div className={styles['logout-label']}>{ t('LOG_OUT') }</div>
+                                            </Button>
+                                            :
+                                            null
+                                    }
                                 </div>
-                                {
-                                    profile.auth !== null ?
-                                        <Button className={styles['logout-button-container']} title={ t('LOG_OUT') } onClick={logoutButtonOnClick}>
-                                            <div className={styles['logout-label']}>{ t('LOG_OUT') }</div>
-                                        </Button>
-                                        :
-                                        null
-                                }
                             </div>
                             <Button className={styles['user-panel-container']} title={'User panel'} target={'_blank'} href={'https://www.stremio.com/acc-settings'}>
                                 <div className={styles['user-panel-label']}>{ t('USER_PANEL') }</div>
diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
index 4db190708..033ec8243 100644
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@@ -113,61 +113,63 @@
                     }
 
                     &.user-info-option-container {
-                        height: 5rem;
+                        gap: 1rem;
 
-                        .avatar-container {
-                            flex: none;
-                            align-self: stretch;
-                            width: 5rem;
-                            margin-right: 1rem;
-                            border-radius: 50%;
-                            background-size: cover;
-                            background-repeat: no-repeat;
-                            background-position: center;
-                            background-origin: content-box;
-                            background-clip: content-box;
-                            opacity: 0.9;
-                            background-color: var(--primary-foreground-color);
-                        }
-
-                        .email-logout-container {
+                        .user-info-content {
                             flex: 1;
-                            align-self: stretch;
                             display: flex;
-                            flex-direction: column;
-                            padding: 1rem 0;
+                            flex-direction: row;
+                            align-items: center;
 
-                            .email-label-container, .logout-button-container {
+                            .avatar-container {
+                                flex: none;
+                                align-self: stretch;
+                                height: 5rem;
+                                width: 5rem;
+                                margin-right: 1rem;
+                                border-radius: 50%;
+                                background-size: cover;
+                                background-repeat: no-repeat;
+                                background-position: center;
+                                background-origin: content-box;
+                                background-clip: content-box;
+                                opacity: 0.9;
+                                background-color: var(--primary-foreground-color);
+                            }
+
+                            .email-logout-container {
+                                flex: none;
                                 display: flex;
-                                flex-direction: row;
-                                align-items: center;
-                            }
+                                flex-direction: column;
 
-                            .email-label-container {
-                                flex: 1 0 auto;
-
-                                .email-label {
-                                    flex: 1;
-                                    font-size: 1.1rem;
-                                    color: var(--primary-foreground-color);
-                                    opacity: 0.7;
+                                .email-label-container, .logout-button-container {
+                                    display: flex;
+                                    flex-direction: row;
+                                    align-items: center;
                                 }
-                            }
 
-                            .logout-button-container {
-                                flex: 0 1 50%;
-
-                                &:hover, &:focus {
-                                    outline: none;
-
-                                    .logout-label {
-                                        text-decoration: underline;
+                                .email-label-container {
+                                    .email-label {
+                                        flex: 1;
+                                        font-size: 1.1rem;
+                                        color: var(--primary-foreground-color);
+                                        opacity: 0.7;
                                     }
                                 }
 
-                                .logout-label {
-                                    flex: 1;
-                                    color: var(--primary-accent-color);
+                                .logout-button-container {
+                                    &:hover, &:focus {
+                                        outline: none;
+
+                                        .logout-label {
+                                            text-decoration: underline;
+                                        }
+                                    }
+
+                                    .logout-label {
+                                        flex: 1;
+                                        color: var(--primary-accent-color);
+                                    }
                                 }
                             }
                         }
@@ -180,7 +182,6 @@
                             width: 10rem;
                             height: 3.5rem;
                             border-radius: 3.5rem;
-                            margin-left: 1rem;
                             background-color: var(--overlay-color);
 
                             &:hover {
@@ -429,6 +430,17 @@
 
             .sections-container {
                 padding: 0 1.5rem;
+
+                .section-container {
+                    .user-info-option-container {
+                        flex-direction: column;
+                        align-items: flex-start;
+
+                        .user-panel-container {
+                            width: 100% !important;
+                        }
+                    }
+                }
             }
         }
     }