nikdoof/pocket-id
1
0
Fork 0
mirror of https://github.com/nikdoof/pocket-id.git synced 2025-12-14 07:12:19 +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'; import HeaderAvatar from './header-avatar.svelte';
let isAuthPage = $derived( 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> </script>
<div class=" w-full {isAuthPage ? 'absolute top-0 z-10 mt-4' : 'border-b'}"> <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"> <div class="flex h-16 items-center">
{#if !isAuthPage} {#if !isAuthPage}
<Logo class="mr-3 h-10 w-10" /> <Logo class="mr-3 h-10 w-10" />

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

@@ -22,14 +22,16 @@
</script> </script>
<section> <section>
<div class="h-screen w-full"> <div class="bg-muted/40 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"> <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>
<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> <h1 class="mb-5 text-3xl font-semibold">Settings</h1>
</div> </div>
<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"> <nav class="text-muted-foreground grid gap-4 text-sm">
{#each links as { href, label }} {#each links as { href, label }}