nikdoof/pocket-id
1
0
Fork 0
mirror of https://github.com/nikdoof/pocket-id.git synced 2025-12-13 23:02:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: limit width of content on large screens

Browse Source
This commit is contained in:
Elias Schneider
2024-09-06 08:57:48 +02:00
parent 8ad632e6c1
commit c6f83a581a
2 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/lib/components/header/header.svelte
View File

@@ -6,12 +6,13 @@
import HeaderAvatar from './header-avatar.svelte';
let isAuthPage = $derived(
!$page.error && ($page.url.pathname.startsWith('/authorize') || $page.url.pathname.startsWith('/login'))
!$page.error &&
($page.url.pathname.startsWith('/authorize') || $page.url.pathname.startsWith('/login'))
);
</script>
<div class=" w-full {isAuthPage ? 'absolute top-0 z-10 mt-4' : 'border-b'}">
<div class="mx-auto flex w-full max-w-[1520px] items-center justify-between px-4 md:px-10">
<div class="mx-auto flex w-full max-w-[1640px] items-center justify-between px-4 md:px-10">
<div class="flex h-16 items-center">
{#if !isAuthPage}
<Logo class="mr-3 h-10 w-10" />

10
frontend/src/routes/settings/+layout.svelte
View File

@@ -22,14 +22,16 @@
</script>
<section>
<div class="h-screen w-full">
<main class="bg-muted/40 flex min-h-screen flex-col gap-x-4 gap-y-10 p-4 md:p-10 lg:flex-row">
<div class="bg-muted/40 h-screen w-full">
<main
class="mx-auto flex min-h-screen max-w-[1640px] flex-col gap-x-4 gap-y-10 p-4 md:p-10 lg:flex-row"
>
<div>
<div class="mx-auto grid w-full max-w-[1440px] gap-2">
<div class="mx-auto grid w-full gap-2">
<h1 class="mb-5 text-3xl font-semibold">Settings</h1>
</div>
<div
class="mx-auto grid w-full max-w-[1440px] items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]"
class="mx-auto grid items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]"
>
<nav class="text-muted-foreground grid gap-4 text-sm">
{#each links as { href, label }}