From 4bdde8ac84cacab4e4f1ae2b95150671859267a1 Mon Sep 17 00:00:00 2001 From: Nimish Date: Tue, 11 Aug 2026 20:23:51 +0530 Subject: [PATCH 1/2] fix(frontend): improve mobile responsiveness --- frontend/app/[team]/access/layout.tsx | 4 +- frontend/app/[team]/access/members/page.tsx | 4 +- frontend/app/[team]/access/network/page.tsx | 12 +- .../[team]/access/service-accounts/page.tsx | 8 +- .../apps/[app]/_components/AppSecrets.tsx | 16 +- .../app/[team]/apps/[app]/access/layout.tsx | 10 +- .../members/_components/AddMemberDialog.tsx | 14 +- .../[team]/apps/[app]/access/members/page.tsx | 8 +- .../[team]/apps/[app]/access/tokens/page.tsx | 12 +- .../[environment]/[[...path]]/page.tsx | 29 +-- frontend/app/[team]/apps/[app]/layout.tsx | 8 +- frontend/app/[team]/apps/[app]/logs/page.tsx | 2 +- .../app/[team]/apps/[app]/settings/page.tsx | 6 +- frontend/app/[team]/layout.tsx | 7 +- frontend/app/[team]/recovery/page.tsx | 24 +-- frontend/app/[team]/settings/page.tsx | 2 +- frontend/app/onboard/page.tsx | 4 +- frontend/components/apps/AppCard.tsx | 2 +- frontend/components/apps/AppsView.tsx | 8 +- .../components/auth/UnlockKeyringDialog.tsx | 14 +- frontend/components/layout/Navbar.tsx | 2 +- frontend/components/layout/Sidebar.tsx | 178 ++++++++++++++---- frontend/components/logs/AuditLogs.tsx | 10 +- frontend/components/logs/KmsLogs.tsx | 6 +- frontend/components/logs/SecretLogs.tsx | 8 +- .../onboarding/AccountSeedChecker.tsx | 4 +- frontend/components/onboarding/Stepper.tsx | 4 +- 27 files changed, 269 insertions(+), 137 deletions(-) diff --git a/frontend/app/[team]/access/layout.tsx b/frontend/app/[team]/access/layout.tsx index 57e0d32c9..419da6613 100644 --- a/frontend/app/[team]/access/layout.tsx +++ b/frontend/app/[team]/access/layout.tsx @@ -78,14 +78,14 @@ export default function AccessLayout({ setTabIndex(index)}> - + {tabs.map((tab) => ( {({ selected }) => ( Manage organisation members.

-
+
@@ -126,6 +126,7 @@ export default function Members({ params }: { params: { team: string } }) { membersLoading && !membersData ? ( ) : ( +
@@ -212,6 +213,7 @@ export default function Members({ params }: { params: { team: string } }) { ))}
+
) ) : ( 0 ? ( - +
+
))} -
@@ -133,7 +134,8 @@ export default function NetworkPolicies({ params }: { params: { team: string } }
+ +
) : ( 0 ? ( - +
+
))} -
@@ -214,7 +217,8 @@ export default function NetworkPolicies({ params }: { params: { team: string } }
+ +
) : ( Manage service accounts.

-
+
@@ -100,7 +100,8 @@ export default function ServiceAccounts({ params }: { params: { team: string } } ) : ( - +
+
))} -
@@ -166,7 +167,8 @@ export default function ServiceAccounts({ params }: { params: { team: string } }
+ +
) ) : ( {
-
-
-
+
+
+
setSearchQuery(e.target.value)} /> @@ -1002,7 +1002,7 @@ export const AppSecrets = ({ team, app }: { team: string; app: string }) => {
-
+
{unsavedChanges && (
-
+
diff --git a/frontend/app/[team]/apps/[app]/access/layout.tsx b/frontend/app/[team]/apps/[app]/access/layout.tsx index ec4732c9f..2922ce507 100644 --- a/frontend/app/[team]/apps/[app]/access/layout.tsx +++ b/frontend/app/[team]/apps/[app]/access/layout.tsx @@ -52,7 +52,7 @@ export default function AccessLayout({ return (

Access

@@ -60,15 +60,15 @@ export default function AccessLayout({
setTabIndex(index)}> -
- +
+ {tabs.map((tab) => ( {({ selected }) => ( ))} -
{children}
+
{children}
diff --git a/frontend/app/[team]/apps/[app]/access/members/_components/AddMemberDialog.tsx b/frontend/app/[team]/apps/[app]/access/members/_components/AddMemberDialog.tsx index a8714f506..93cc03b1c 100644 --- a/frontend/app/[team]/apps/[app]/access/members/_components/AddMemberDialog.tsx +++ b/frontend/app/[team]/apps/[app]/access/members/_components/AddMemberDialog.tsx @@ -304,7 +304,7 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => { }) return ( - + {({ open }) => ( <> @@ -322,7 +322,7 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => { leaveFrom="transform scale-100 opacity-100" leaveTo="transform scale-95 opacity-0" > - +
@@ -357,7 +357,7 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => { {({ active }) => (
{ @@ -472,7 +472,7 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => {

-
+
Member
@@ -482,9 +482,9 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => {
{selectedMembers.map((member, index) => ( -
+
@@ -499,7 +499,7 @@ export const AddMemberDialog = ({ appId }: { appId: string }) => {
-
+
{userCanReadEnvironments ? ( {userCanReadAppMembers ? (
-
+
@@ -121,7 +121,8 @@ export default function Members({ params }: { params: { team: string; app: strin )}
- +
+
))} -
@@ -186,7 +187,8 @@ export default function Members({ params }: { params: { team: string; app: strin
+ +
) : ( +
{userCanReadTokens ? (
{keyring !== null && ( -
-
+
+
setActivePanel('secrets')} className={clsx( - 'p-4 cursor-pointer border-l rounded-r-lg transition ease -ml-px w-60', + 'p-3 cursor-pointer whitespace-nowrap border-b md:border-b-0 md:border-l rounded-t-lg md:rounded-t-none md:rounded-r-lg transition ease md:-ml-px md:w-60', activePanel === 'secrets' ? 'bg-zinc-300 dark:bg-zinc-800 font-semibold border-emerald-500' : 'bg-zinc-200 dark:bg-zinc-900 hover:font-semibold border-neutral-500/40' @@ -269,7 +269,7 @@ export default function Tokens({ params }: { params: { team: string; app: string role="button" onClick={() => setActivePanel('kms')} className={clsx( - 'p-4 cursor-pointer border-l rounded-r-lg transition ease -ml-px w-60', + 'p-3 cursor-pointer whitespace-nowrap border-b md:border-b-0 md:border-l rounded-t-lg md:rounded-t-none md:rounded-r-lg transition ease md:-ml-px md:w-60', activePanel === 'kms' ? 'bg-zinc-300 dark:bg-zinc-800 font-semibold border-emerald-500' : 'bg-zinc-200 dark:bg-zinc-900 hover:font-semibold border-neutral-500/40' @@ -282,7 +282,7 @@ export default function Tokens({ params }: { params: { team: string; app: string
)}
-
+
{app && activePanel === 'secrets' && ( )} diff --git a/frontend/app/[team]/apps/[app]/environments/[environment]/[[...path]]/page.tsx b/frontend/app/[team]/apps/[app]/environments/[environment]/[[...path]]/page.tsx index 8551f630a..f5c96a194 100644 --- a/frontend/app/[team]/apps/[app]/environments/[environment]/[[...path]]/page.tsx +++ b/frontend/app/[team]/apps/[app]/environments/[environment]/[[...path]]/page.tsx @@ -1209,6 +1209,7 @@ export default function EnvironmentPath({ return ( handleAddSecret(true)} menuContent={
@@ -1259,7 +1260,7 @@ export default function EnvironmentPath({
} > - New Secret + New Secret ) } @@ -1379,15 +1380,15 @@ export default function EnvironmentPath({ filterMenuOpen ? 'z-30' : 'z-5' )} > -
-
-
+
+
+
setSearchQuery(e.target.value)} /> @@ -1415,7 +1416,7 @@ export default function EnvironmentPath({
-
+
{unsavedChanges && ( diff --git a/frontend/app/[team]/apps/[app]/layout.tsx b/frontend/app/[team]/apps/[app]/layout.tsx index 256ee0d27..406f59043 100644 --- a/frontend/app/[team]/apps/[app]/layout.tsx +++ b/frontend/app/[team]/apps/[app]/layout.tsx @@ -76,10 +76,10 @@ export default function AppLayout({
)} {app && ( -
-
+
+

{app.name}

-
+
{app.id} @@ -92,7 +92,7 @@ export default function AppLayout({ )} setTabIndex(index)}> - + {tabs.map((tab) => ( {({ selected }) => ( diff --git a/frontend/app/[team]/apps/[app]/logs/page.tsx b/frontend/app/[team]/apps/[app]/logs/page.tsx index 36e54564b..e7c1574d9 100644 --- a/frontend/app/[team]/apps/[app]/logs/page.tsx +++ b/frontend/app/[team]/apps/[app]/logs/page.tsx @@ -34,7 +34,7 @@ export default function Logs({ params }: { params: { team: string; app: string } ) return ( -
+
{organisation?.role!.name!.toLowerCase() === 'owner' ? ( setTabIndex(index)}> diff --git a/frontend/app/[team]/apps/[app]/settings/page.tsx b/frontend/app/[team]/apps/[app]/settings/page.tsx index 839c24552..46605a438 100644 --- a/frontend/app/[team]/apps/[app]/settings/page.tsx +++ b/frontend/app/[team]/apps/[app]/settings/page.tsx @@ -90,9 +90,9 @@ export default function AppSettings({ params }: { params: { team: string; app: s

App

App name and information

-
+
-
+

- {app.id} + {app.id}

diff --git a/frontend/app/[team]/layout.tsx b/frontend/app/[team]/layout.tsx index 27bc5d681..fc84c44b6 100644 --- a/frontend/app/[team]/layout.tsx +++ b/frontend/app/[team]/layout.tsx @@ -105,8 +105,9 @@ export default function RootLayout({ return (
{showUnlockDialog && } @@ -114,7 +115,7 @@ export default function RootLayout({ {showNav && }
-
+
{children}
diff --git a/frontend/app/[team]/recovery/page.tsx b/frontend/app/[team]/recovery/page.tsx index 097d77a65..e34080ea6 100644 --- a/frontend/app/[team]/recovery/page.tsx +++ b/frontend/app/[team]/recovery/page.tsx @@ -195,16 +195,16 @@ export default function Recovery({ params }: { params: { team: string } }) { return ( <> -
-
+
+
-
-
-

+
+
+

Account Recovery

-

+

This wizard will help you restore access to your Phase Account. Please enter your recovery phrase below {skipPasswordStep @@ -216,23 +216,25 @@ export default function Recovery({ params }: { params: { team: string } }) {

{org && ( -
-
+
+
{session?.user?.name} - {session?.user?.email} + + {session?.user?.email} +
-
+

{org.name}

diff --git a/frontend/app/[team]/settings/page.tsx b/frontend/app/[team]/settings/page.tsx index af17be6d1..6615ecae0 100644 --- a/frontend/app/[team]/settings/page.tsx +++ b/frontend/app/[team]/settings/page.tsx @@ -138,7 +138,7 @@ export default function Settings({ params }: { params: { team: string } }) {
Public key
- + {activeOrganisation?.identityKey}
diff --git a/frontend/app/onboard/page.tsx b/frontend/app/onboard/page.tsx index ff479f09a..43376ef38 100644 --- a/frontend/app/onboard/page.tsx +++ b/frontend/app/onboard/page.tsx @@ -349,9 +349,9 @@ const Onboard = () => { const isSudoPasswordStep = !skipSudoStep && step === 1 return ( -
+
{!licenseActivated() ? ( -
+
{
) : (
-
e.stopPropagation()}> +
e.stopPropagation()}> {id} diff --git a/frontend/components/apps/AppsView.tsx b/frontend/components/apps/AppsView.tsx index 1339f6312..3e10982d2 100644 --- a/frontend/components/apps/AppsView.tsx +++ b/frontend/components/apps/AppsView.tsx @@ -86,15 +86,15 @@ export const AppsView = ({ return (
{!noApps && ( -
-
-
+
+
+
setSearchQuery(e.target.value)} /> diff --git a/frontend/components/auth/UnlockKeyringDialog.tsx b/frontend/components/auth/UnlockKeyringDialog.tsx index 5bfcf9471..03adba2b9 100644 --- a/frontend/components/auth/UnlockKeyringDialog.tsx +++ b/frontend/components/auth/UnlockKeyringDialog.tsx @@ -249,7 +249,7 @@ export default function UnlockKeyringDialog(props: { organisation: OrganisationT leaveFrom="opacity-100 scale-100" leaveTo="opacity-0 scale-95" > - + {!devicePasswordExists && ( @@ -274,9 +274,9 @@ export default function UnlockKeyringDialog(props: { organisation: OrganisationT
-
+
-
+
@@ -285,7 +285,7 @@ export default function UnlockKeyringDialog(props: { organisation: OrganisationT {session?.user?.name} - + {session?.user?.email}
@@ -301,7 +301,7 @@ export default function UnlockKeyringDialog(props: { organisation: OrganisationT
-
+
-
+
-
+
+
+ +
+ +
+ aria-label={link.name} + aria-current={link.active ? 'page' : undefined} + title={link.name} + > + {link.icon} + + {link.name === 'Access Control' ? 'Access' : link.name} + + + ))} + -
+ ) } diff --git a/frontend/components/logs/AuditLogs.tsx b/frontend/components/logs/AuditLogs.tsx index 2dce7b29a..6cadb28c7 100644 --- a/frontend/components/logs/AuditLogs.tsx +++ b/frontend/components/logs/AuditLogs.tsx @@ -1070,13 +1070,13 @@ export default function AuditLogs() { {userCanReadLogs ? (
{/* Resource type tabs */} -
+
{RESOURCE_TABS.map((tab) => (
{/* Table */} - +
+
@@ -1406,7 +1407,8 @@ export default function AuditLogs() { -
+ +
) : (
- +
+
@@ -332,7 +333,8 @@ export default function KMSLogs(props: { app: string }) { -
+ +
) } diff --git a/frontend/components/logs/SecretLogs.tsx b/frontend/components/logs/SecretLogs.tsx index 2f683ad4e..81e8faff0 100644 --- a/frontend/components/logs/SecretLogs.tsx +++ b/frontend/components/logs/SecretLogs.tsx @@ -608,7 +608,7 @@ export default function SecretLogs(props: { app: string }) { > {/* Event types */}
@@ -887,7 +887,8 @@ export default function SecretLogs(props: { app: string }) {
- +
+
@@ -933,7 +934,8 @@ export default function SecretLogs(props: { app: string }) { -
+ +
) : ( { props.mnemonic ? inputs[index] === mnemonicWords[index] : false return ( -
+
{[...Array(inputs.length)].map((n, index) => (
{ readOnly={isCorrect(index) ? true : false} //maxLength={25} className={clsx( - 'font-mono w-full ph-no-capture', + 'font-mono w-full text-sm ph-no-capture', isCorrect(index) && '!bg-emerald-400/20 !text-emerald-500' )} /> diff --git a/frontend/components/onboarding/Stepper.tsx b/frontend/components/onboarding/Stepper.tsx index 954ad635f..058447c3f 100644 --- a/frontend/components/onboarding/Stepper.tsx +++ b/frontend/components/onboarding/Stepper.tsx @@ -18,7 +18,7 @@ export const Stepper = ({ steps, activeStep, align = 'center' }: StepperProps) = const ICON_WRAPPER_BASE = 'rounded-full transition duration-500 ease-in-out h-8 w-8 border text-center flex justify-center items-center text-xs' const LABEL_BASE = - 'absolute top-0 -ml-10 text-center mt-12 w-32 text-2xs font-medium uppercase tracking-widest' + 'absolute top-0 -ml-8 text-center mt-12 w-24 text-2xs font-medium uppercase tracking-widest sm:-ml-10 sm:w-32' const THREAD_BASE = 'flex-auto border-t transition duration-500 ease-in-out' // Defensive clamp: if a parent shrinks `steps` while `activeStep` is @@ -37,7 +37,7 @@ export const Stepper = ({ steps, activeStep, align = 'center' }: StepperProps) = return (
{steps.length > 1 && ( -
+
{steps.map((step: Step, index: number) => ( <> From 4a3de8ee202632d560f536abe7c077c53a1069db Mon Sep 17 00:00:00 2001 From: rohan Date: Fri, 14 Aug 2026 16:20:38 +0530 Subject: [PATCH 2/2] =?UTF-8?q?fix(frontend):=20remediate=20mobile=20respo?= =?UTF-8?q?nsiveness=20review=20=E2=80=94=20nav-height=20token,=20dvh=20sh?= =?UTF-8?q?ell,=20sticky=20log=20headers,=20full-width=20tables,=20tab=20u?= =?UTF-8?q?nderline=20clip,=20stable=20More=20menu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/app/[team]/access/layout.tsx | 43 ++-- frontend/app/[team]/access/network/page.tsx | 4 +- .../[team]/access/service-accounts/page.tsx | 2 +- .../[team]/apps/[app]/access/members/page.tsx | 2 +- .../[team]/apps/[app]/access/tokens/page.tsx | 4 +- frontend/app/[team]/apps/[app]/layout.tsx | 43 ++-- frontend/app/[team]/apps/page.tsx | 2 +- frontend/app/[team]/integrations/layout.tsx | 2 +- frontend/app/[team]/layout.tsx | 11 +- frontend/app/[team]/logs/page.tsx | 2 +- frontend/app/[team]/recovery/page.tsx | 6 +- frontend/app/globals.css | 12 ++ frontend/components/layout/Sidebar.tsx | 190 ++++++++++-------- frontend/components/logs/AuditLogs.tsx | 38 ++-- frontend/components/logs/KmsLogs.tsx | 4 +- frontend/components/logs/SecretLogs.tsx | 4 +- 16 files changed, 213 insertions(+), 156 deletions(-) diff --git a/frontend/app/[team]/access/layout.tsx b/frontend/app/[team]/access/layout.tsx index 419da6613..d7d3e6720 100644 --- a/frontend/app/[team]/access/layout.tsx +++ b/frontend/app/[team]/access/layout.tsx @@ -71,32 +71,35 @@ export default function AccessLayout({ return (

Access

setTabIndex(index)}> - - {tabs.map((tab) => ( - - {({ selected }) => ( - - {tab.name} - - )} - - ))} - + {/* overflow-x-auto lives on the wrapper so the tabs' -mb-px underline isn't clipped */} +
+ + {tabs.map((tab) => ( + + {({ selected }) => ( + + {tab.name} + + )} + + ))} + +
{children}
diff --git a/frontend/app/[team]/access/network/page.tsx b/frontend/app/[team]/access/network/page.tsx index 436afc5a8..790586aa7 100644 --- a/frontend/app/[team]/access/network/page.tsx +++ b/frontend/app/[team]/access/network/page.tsx @@ -60,7 +60,7 @@ export default function NetworkPolicies({ params }: { params: { team: string } } {userCanReadNetworkPolicies ? ( allPolicies.length > 0 ? (
- +
@@ -184,7 +184,7 @@ export default function NetworkPolicies({ params }: { params: { team: string } } {userCanReadNetworkPolicies ? ( globalPolicies.length > 0 ? (
- +
diff --git a/frontend/app/[team]/access/service-accounts/page.tsx b/frontend/app/[team]/access/service-accounts/page.tsx index bd4c8c7dd..0608d42f6 100644 --- a/frontend/app/[team]/access/service-accounts/page.tsx +++ b/frontend/app/[team]/access/service-accounts/page.tsx @@ -101,7 +101,7 @@ export default function ServiceAccounts({ params }: { params: { team: string } } ) : (
- +
diff --git a/frontend/app/[team]/apps/[app]/access/members/page.tsx b/frontend/app/[team]/apps/[app]/access/members/page.tsx index e89eeced0..08000882a 100644 --- a/frontend/app/[team]/apps/[app]/access/members/page.tsx +++ b/frontend/app/[team]/apps/[app]/access/members/page.tsx @@ -122,7 +122,7 @@ export default function Members({ params }: { params: { team: string; app: strin
- +
diff --git a/frontend/app/[team]/apps/[app]/access/tokens/page.tsx b/frontend/app/[team]/apps/[app]/access/tokens/page.tsx index f07de23f3..1d1f37367 100644 --- a/frontend/app/[team]/apps/[app]/access/tokens/page.tsx +++ b/frontend/app/[team]/apps/[app]/access/tokens/page.tsx @@ -256,7 +256,7 @@ export default function Tokens({ params }: { params: { team: string; app: string role="button" onClick={() => setActivePanel('secrets')} className={clsx( - 'p-3 cursor-pointer whitespace-nowrap border-b md:border-b-0 md:border-l rounded-t-lg md:rounded-t-none md:rounded-r-lg transition ease md:-ml-px md:w-60', + 'p-3 md:p-4 cursor-pointer whitespace-nowrap border-b md:border-b-0 md:border-l rounded-t-lg md:rounded-t-none md:rounded-r-lg transition ease md:-ml-px md:w-60', activePanel === 'secrets' ? 'bg-zinc-300 dark:bg-zinc-800 font-semibold border-emerald-500' : 'bg-zinc-200 dark:bg-zinc-900 hover:font-semibold border-neutral-500/40' @@ -269,7 +269,7 @@ export default function Tokens({ params }: { params: { team: string; app: string role="button" onClick={() => setActivePanel('kms')} className={clsx( - 'p-3 cursor-pointer whitespace-nowrap border-b md:border-b-0 md:border-l rounded-t-lg md:rounded-t-none md:rounded-r-lg transition ease md:-ml-px md:w-60', + 'p-3 md:p-4 cursor-pointer whitespace-nowrap border-b md:border-b-0 md:border-l rounded-t-lg md:rounded-t-none md:rounded-r-lg transition ease md:-ml-px md:w-60', activePanel === 'kms' ? 'bg-zinc-300 dark:bg-zinc-800 font-semibold border-emerald-500' : 'bg-zinc-200 dark:bg-zinc-900 hover:font-semibold border-neutral-500/40' diff --git a/frontend/app/[team]/apps/[app]/layout.tsx b/frontend/app/[team]/apps/[app]/layout.tsx index 406f59043..79a11379c 100644 --- a/frontend/app/[team]/apps/[app]/layout.tsx +++ b/frontend/app/[team]/apps/[app]/layout.tsx @@ -70,7 +70,7 @@ export default function AppLayout({ return (
{loading && (
@@ -92,25 +92,28 @@ export default function AppLayout({ )} setTabIndex(index)}> - - {tabs.map((tab) => ( - - {({ selected }) => ( - - {tab.name} - - )} - - ))} - + {/* overflow-x-auto lives on the wrapper so the tabs' -mb-px underline isn't clipped */} +
+ + {tabs.map((tab) => ( + + {({ selected }) => ( + + {tab.name} + + )} + + ))} + +
{children}
diff --git a/frontend/app/[team]/apps/page.tsx b/frontend/app/[team]/apps/page.tsx index d2435542d..f1a28f520 100644 --- a/frontend/app/[team]/apps/page.tsx +++ b/frontend/app/[team]/apps/page.tsx @@ -55,7 +55,7 @@ export default function AppsHome({ params }: { params: { team: string } }) { return (

Apps

diff --git a/frontend/app/[team]/integrations/layout.tsx b/frontend/app/[team]/integrations/layout.tsx index 8ea86d007..ed6ac04ec 100644 --- a/frontend/app/[team]/integrations/layout.tsx +++ b/frontend/app/[team]/integrations/layout.tsx @@ -51,7 +51,7 @@ export default function AccessLayout({ return (

{params.team} Integrations

diff --git a/frontend/app/[team]/layout.tsx b/frontend/app/[team]/layout.tsx index fc84c44b6..7c2e29fe2 100644 --- a/frontend/app/[team]/layout.tsx +++ b/frontend/app/[team]/layout.tsx @@ -105,7 +105,7 @@ export default function RootLayout({ return (
} {showNav && } {showNav && } -
+
-
+
{children}
diff --git a/frontend/app/[team]/logs/page.tsx b/frontend/app/[team]/logs/page.tsx index 58f4a2a50..696606c3d 100644 --- a/frontend/app/[team]/logs/page.tsx +++ b/frontend/app/[team]/logs/page.tsx @@ -16,7 +16,7 @@ export default function OrgLogs({ params }: { params: { team: string } }) { ) return ( -
+

Audit Logs

diff --git a/frontend/app/[team]/recovery/page.tsx b/frontend/app/[team]/recovery/page.tsx index e34080ea6..2ac21e039 100644 --- a/frontend/app/[team]/recovery/page.tsx +++ b/frontend/app/[team]/recovery/page.tsx @@ -195,16 +195,16 @@ export default function Recovery({ params }: { params: { team: string } }) { return ( <> -
+
-
+

Account Recovery

-

+

This wizard will help you restore access to your Phase Account. Please enter your recovery phrase below {skipPasswordStep diff --git a/frontend/app/globals.css b/frontend/app/globals.css index 8e3dec806..418b60915 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -2,6 +2,18 @@ @tailwind components; @tailwind utilities; +/* Height of the fixed mobile bottom nav; collapses to 0 above the md breakpoint so + layout paddings and viewport-height calcs can reference it unconditionally */ +:root { + --mobile-tabbar-height: calc(3.5rem + env(safe-area-inset-bottom)); +} + +@media (min-width: 768px) { + :root { + --mobile-tabbar-height: 0px; + } +} + :root { --max-width: 1100px; --border-radius: 12px; diff --git a/frontend/components/layout/Sidebar.tsx b/frontend/components/layout/Sidebar.tsx index 770871867..8390218d0 100644 --- a/frontend/components/layout/Sidebar.tsx +++ b/frontend/components/layout/Sidebar.tsx @@ -77,6 +77,108 @@ const SidebarLink = ({ ) } +const MobileMoreMenu = ({ + overflowLinks, + organisations, + activeOrganisation, + isOwner, +}: { + overflowLinks: SidebarLinkT[] + organisations: OrganisationType[] | null + activeOrganisation: OrganisationType | null + isOwner: boolean +}) => { + return ( +

+ {({ open }) => ( + <> + link.active) + ? 'text-emerald-600 dark:text-emerald-400' + : 'text-zinc-600 dark:text-zinc-400' + )} + aria-label="More navigation" + title="More" + > + + More + + + +
Organisation
+
+ {organisations?.map((org: OrganisationType) => ( + + {({ active }) => ( + + {org.name} + {org.id === activeOrganisation?.id && ( + Current + )} + + )} + + ))} + {!isOwner && ( + + {({ active }) => ( + + + Create New Organisation + + )} + + )} +
+
+ {overflowLinks.map((link) => ( + + {({ active }) => ( + + {link.icon} + {link.name} + + )} + + ))} +
+ + + + )} + + ) +} + const Sidebar = () => { const { sidebarState, setUserPreference } = useContext(SidebarContext) const [isAutoCollapsed, setIsAutoCollapsed] = useState(false) @@ -267,87 +369,11 @@ const Sidebar = () => { const mobileLinks = links.slice(0, 4) const overflowLinks = links.slice(4) - const MobileMoreMenu = () => { - return ( - - {({ open }) => ( - <> - link.active) - ? 'text-emerald-600 dark:text-emerald-400' - : 'text-zinc-600 dark:text-zinc-400' - )} - aria-label="More navigation" - title="More" - > - - More - - - -
Organisation
-
- {organisations?.map((org: OrganisationType) => ( - - {({ active }) => ( - - {org.name} - {org.id === activeOrganisation?.id && ( - Current - )} - - )} - - ))} -
-
- {overflowLinks.map((link) => ( - - {({ active }) => ( - - {link.icon} - {link.name} - - )} - - ))} -
- - - - )} - - ) - } - return ( <>
@@ -386,7 +412,8 @@ const Sidebar = () => {
-