From b8887b601aceb474c78af659ea8b00d49dba22a0 Mon Sep 17 00:00:00 2001 From: Mrs Feathers Date: Mon, 27 Jan 2025 22:44:46 -0500 Subject: [PATCH] make settings page more mobile friendly Signed-off-by: Mrs Feathers --- .../user/user-settings/UserSettingsPage.ts | 26 +++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/web/src/user/user-settings/UserSettingsPage.ts b/web/src/user/user-settings/UserSettingsPage.ts index 646661a236cc..db9bdd1527c8 100644 --- a/web/src/user/user-settings/UserSettingsPage.ts +++ b/web/src/user/user-settings/UserSettingsPage.ts @@ -66,6 +66,32 @@ export class UserSettingsPage extends AKElement { margin-right: auto; } } + @media screen and (max-width: 768px) { + :host { + width: 100%; + padding: 0 1rem; + } + ak-tabs[vertical] { + --pf-c-tabs--m-vertical--MaxWidth: 100%; + flex-direction: column; + } + ak-tabs[vertical] [role="tablist"] { + max-width: 100%; + border-right: none; + border-bottom: var(--pf-c-tabs--before--BorderWidth) solid var(--pf-c-tabs--before--BorderColor); + margin-bottom: 1rem; + } + .pf-c-card { + --pf-c-card--BoxShadow: none; + border: 1px solid var(--pf-global--BorderColor--100); + } + .pf-c-card__body { + padding: var(--pf-global--spacer--sm); + } + .pf-l-stack { + --pf-l-stack--m-gutter--Gap: var(--pf-global--spacer--sm); + } + } `, ]; }