diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index c807ddad038f9be6afa6d78e0fa126162d15a72b..5e02383e34381f432e33eea4e1b799505be45c17 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 489dea95b3ae7d249a321ffc3fd4ef972c252ba5..ffd60a970f7183460e74565bc22a511573bdaad4 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> ))}