Skip to content

Aligns all the database and nested routes #2330

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open

Aligns all the database and nested routes #2330

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
6b5dd7b
updates: misc.
ItzNotABug Sep 5, 2025
af1d7ac
update: database layouts.
ItzNotABug Sep 5, 2025
055d8b7
update: database layouts.
ItzNotABug Sep 5, 2025
872bdfa
fix: footer going brrrr.
ItzNotABug Sep 5, 2025
b653a9e
fix: empty state jumpy animation.
ItzNotABug Sep 5, 2025
cb02ef5
fix: edge case on different viewports.
ItzNotABug Sep 5, 2025
220556f
lint.
ItzNotABug Sep 5, 2025
f6e7f00
update: more alignment fixes.
ItzNotABug Sep 5, 2025
7a37ca4
update: allow slide transition on small devices.
ItzNotABug Sep 5, 2025
eb53d79
Merge branch 'main' into 'layout-header-alignment'.
ItzNotABug Sep 5, 2025
3bb46ec
update: sidebar top alignment on tablet and small viewports.
ItzNotABug Sep 5, 2025
7aced4a
update: align the buttons with tabs.
ItzNotABug Sep 6, 2025
eb62fc7
update: more alignment fixes.
ItzNotABug Sep 6, 2025
db121ae
Merge branch 'main' into layout-header-alignment
ItzNotABug Sep 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 10 additions & 2 deletions src/lib/components/sidebar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@
<div
class="sidebar"
class:only-mobile-tablet={!project}
class:no-transitions={$noWidthTransition}
class:no-transitions={$noWidthTransition && !$isTabletViewport}
style:--overlay-on-neutral={$app.themeInUse === 'dark'
? 'var(--neutral-750)'
: 'var(--neutral-100)'}>
Expand Down Expand Up @@ -367,7 +367,7 @@
<div
class="sub-navigation"
class:icons={state === 'icons'}
class:no-transitions={$noWidthTransition}>
class:no-transitions={$noWidthTransition && !$isTabletViewport}>
<svelte:component this={subNavigation} />
</div>
{/if}
Expand All @@ -378,6 +378,14 @@
&.no-transitions :global(nav) {
transition: none !important;
}

& :global(nav) {
@media (max-width: 1023px) {
top: var(--banner-spacing, 0px);
margin-top: var(--banner-spacing, 0px);
height: calc(100vh - var(--banner-spacing, 0px)) !important;
}
}
}

.middle-container {
Expand Down
8 changes: 2 additions & 6 deletions src/lib/layout/activity.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
export let offset = 0;
export let logs: Models.LogList;
export let insideSideSheet = false;
export let databasesScreen = false;
export let expanded = false;
export let useCreateLinkForPagination = true;

const columns: PinkColumn[] = [
Expand All @@ -23,11 +23,7 @@
];
</script>

<Container
{databasesScreen}
{insideSideSheet}
expanded={databasesScreen && !insideSideSheet}
slotSpacing={databasesScreen && !insideSideSheet}>
<Container {insideSideSheet} expanded={expanded && !insideSideSheet}>
{#if logs.total}
<div>
<Table.Root {columns} let:root>
Expand Down
39 changes: 25 additions & 14 deletions src/lib/layout/animatedTitle.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,31 @@
<script lang="ts">
import { isSmallViewport } from '$lib/stores/viewport';
import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
import { Button, Icon, Layout } from '@appwrite.io/pink-svelte';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';

let {
href = null,
children = null,
collapsed = false,
children,
backOnlyDesktop = false,
...restProps
}: {
href?: string | null;
collapsed?: boolean;
children: Snippet;
children?: Snippet;
backOnlyDesktop?: boolean;
} & HTMLAttributes<HTMLDivElement> = $props();

const buttonSize = $derived(collapsed ? 'xs' : 's');
const currentLineHeight = $derived(collapsed ? '130%' : '140%');
const currentLetterSpacing = $derived(collapsed ? '0' : '-0.144px');
const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : 'var(--font-size-xxl)');
const currentFontSize = $derived(
collapsed
? 'var(--font-size-l)'
: $isSmallViewport
? 'var(--font-size-xl)'
: 'var(--font-size-xxl)'
);
</script>

<Layout.Stack
Expand All @@ -28,20 +34,24 @@
direction="row"
alignItems="center"
justifyContent="center"
style={backOnlyDesktop && $isTabletViewport ? 'margin-inline-start: -2.5rem;' : ''}
{...restProps}>
{#if href && !$isSmallViewport}
{#if href}
<span style:position="relative">
<Button.Anchor size={buttonSize} icon variant="text" {href} aria-label="page back">
<Button.Anchor
{href}
icon
variant="text"
size={buttonSize}
aria-label="page back"
disabled={$isTabletViewport}
style={$isTabletViewport ? 'visibility: hidden' : ''}>
<Icon icon={IconChevronLeft} />
Comment on lines +41 to 49
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Fix: respect backOnlyDesktop when hiding/disabling back button on tablet

Currently the back button is disabled/hidden on all tablets, ignoring backOnlyDesktop. This breaks navigation in contexts where the back button should remain visible on tablet. Align with coverTitle.svelte behavior.

-            <Button.Anchor
-                {href}
-                icon
-                variant="text"
-                size={buttonSize}
-                aria-label="page back"
-                disabled={$isTabletViewport}
-                style={$isTabletViewport ? 'visibility: hidden' : ''}>
+            <Button.Anchor
+                {href}
+                icon
+                variant="text"
+                size={buttonSize}
+                aria-label="page back"
+                disabled={backOnlyDesktop && $isTabletViewport}
+                style={backOnlyDesktop && $isTabletViewport ? 'visibility: hidden' : ''}>

Run to confirm there are no other unconditional tablet hides:

🏁 Script executed:

#!/bin/bash
rg -n -C2 -g 'src/**' -e 'disabled=\{\$isTabletViewport\}' -e 'visibility:\s*hidden.*\$isTabletViewport'

Length of output: 431

Respect backOnlyDesktop when hiding/disabling back button on tablet

In src/lib/layout/animatedTitle.svelte (lines 47–48), wrap both disabled and style in backOnlyDesktop && $isTabletViewport so the back button remains active unless explicitly restricted:

-                disabled={$isTabletViewport}
-                style={$isTabletViewport ? 'visibility: hidden' : ''}>
+                disabled={backOnlyDesktop && $isTabletViewport}
+                style={backOnlyDesktop && $isTabletViewport ? 'visibility: hidden' : ''}>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Button.Anchor
{href}
icon
variant="text"
size={buttonSize}
aria-label="page back"
disabled={$isTabletViewport}
style={$isTabletViewport ? 'visibility: hidden' : ''}>
<Icon icon={IconChevronLeft} />
<Button.Anchor
{href}
icon
variant="text"
size={buttonSize}
aria-label="page back"
disabled={backOnlyDesktop && $isTabletViewport}
style={backOnlyDesktop && $isTabletViewport ? 'visibility: hidden' : ''}>
<Icon icon={IconChevronLeft} />
🤖 Prompt for AI Agents 
In src/lib/layout/animatedTitle.svelte around lines 41 to 49, the back button
currently uses $isTabletViewport to set disabled and style; update both the
disabled prop and the style expression to only apply when backOnlyDesktop &&
$isTabletViewport so the button stays active by default unless backOnlyDesktop
is true and we are on tablet. Replace disabled={$isTabletViewport} with
disabled={backOnlyDesktop && $isTabletViewport} and change
style={$isTabletViewport ? 'visibility: hidden' : ''} to style={backOnlyDesktop
&& $isTabletViewport ? 'visibility: hidden' : ''}.

</Button.Anchor>
</span>
{/if}
<h1
class="animated-title"
style:font-size={currentFontSize}
style:line-height={currentLineHeight}
style:letter-spacing={currentLetterSpacing}>
{@render children()}
<h1 class="animated-title" style:font-size={currentFontSize}>
{@render children?.()}
</h1>
Comment on lines +53 to 55
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Avoid empty

when no children provided.

Render the heading only if children exists, or provide a title prop fallback.

-    <h1 class="animated-title" style:font-size={currentFontSize}>
-        {@render children?.()}
-    </h1>
+    {#if children}
+        <h1 class="animated-title" style:font-size={currentFontSize}>
+            {@render children()}
+        </h1>
+    {/if}
🤖 Prompt for AI Agents 
In src/lib/layout/animatedTitle.svelte around lines 44-46, the <h1> may render
empty when children is missing; update the component to only render the <h1>
when children exists or to render a fallback title prop: add an optional "title"
prop, and change the template to conditionally render the heading — if children
is provided call/render it inside the <h1>, otherwise render the <h1> with the
title fallback only when title is non-empty (avoid emitting an empty <h1>).

</Layout.Stack>

Expand All @@ -62,5 +72,6 @@
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
line-height: 130%;
}
</style>
54 changes: 3 additions & 51 deletions src/lib/layout/container.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,16 @@

let {
expanded = false,
slotSpacing = false,
overlapCover = false,
paddingInlineEnd = true,
paddingInlineEndDouble = false,
insideSideSheet = false,
databasesScreen = false,
databasesMainScreen = false,
expandHeightButton = false,
size = null,
children,
...restProps
}: {
expanded?: boolean;
slotSpacing?: boolean;
overlapCover?: boolean;
paddingInlineEnd?: boolean;
paddingInlineEndDouble?: boolean;
insideSideSheet?: boolean;
databasesScreen?: boolean;
databasesMainScreen?: boolean;
expandHeightButton?: boolean;
children?: Snippet;
size?: 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | null;
Expand All @@ -41,14 +31,9 @@
<div
{style}
class:expanded
class:slotSpacing
class:insideSideSheet
class:databasesScreen
class:expandHeightButton
class:databasesMainScreen
class="console-container"
class:paddingInlineEndDouble
class:paddingInlineEnd={!paddingInlineEnd}>
class="console-container">
<Layout.Stack gap="l">
{@render children?.()}
</Layout.Stack>
Expand All @@ -60,7 +45,8 @@
z-index: 1;
margin-block-start: -3.5rem;
}
:global(.console-container) {

.console-container {
margin-block: var(--base-32);

&.insideSideSheet {
Expand Down Expand Up @@ -100,40 +86,6 @@
}
}
}

&.slotSpacing {
padding-block-start: var(--base-32) !important;
}
}

&.paddingInlineEnd {
@media (min-width: 1024px) {
padding-inline-end: 2.75rem !important;
}
}

&.paddingInlineEndDouble {
@media (min-width: 1024px) {
padding-inline-end: calc(2 * 2.75rem) !important;
}
}

&.databasesScreen {
@media (min-width: 1440px) {
min-width: 1070px;
/*max-width: 1144px;*/
}

@media (min-width: 1728px) {
min-width: 1070px;
padding-inline: 196px !important;
}
}

&.databasesMainScreen {
@media (min-width: 1440px) {
max-width: 1200px;
}
}

@media (min-width: 360px) {
Expand Down
34 changes: 16 additions & 18 deletions src/lib/layout/cover.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
export let expanded: boolean = false;
export let animate: boolean = false;
export let collapsed: boolean = false;
export let adjustForSpreadsheet: boolean = false;
export let databasesMainScreen: boolean = false;

let isAnimating = false;
Expand All @@ -33,7 +34,7 @@

<div
class:animate
class:expanded
class:adjustForSpreadsheet
class:collapsed={animate && collapsed}
class="top-cover-console"
style:margin-top={marginTop}
Expand All @@ -43,18 +44,16 @@
<div
class="cover-container"
{style}
class:expanded
class:databasesMainScreen
class:adjustForSpreadsheet
class:collapsed={animate && collapsed}
class:animating={isAnimating}>
<Layout.Stack direction="row" alignItems="baseline">
<slot name="header" />
</Layout.Stack>

{#if $$slots.default}
<div class:expanded-slot={expanded}>
<slot />
</div>
<slot />
{/if}
</div>
</div>
Expand All @@ -80,6 +79,12 @@
&.collapsed {
border-bottom-color: var(--border-neutral, #2d2d31);
}

&.adjustForSpreadsheet {
@media (min-width: 1024px) {
padding-left: calc(190px + 3rem);
}
}
}

.cover-container {
Expand Down Expand Up @@ -114,25 +119,18 @@
max-width: 1200px;
}

&.expanded {
margin-inline: 1rem !important;
}

&.animating {
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

&.databasesMainScreen {
@media (min-width: 1440px) {
max-width: 1200px;
}
&.adjustForSpreadsheet {
padding-left: 2px;
}
}

.expanded-slot {
margin-inline: 3rem !important;
@media (max-width: 768px) {
margin-inline: 0 !important;
&.databasesMainScreen {
@media (min-width: 1024px) {
margin: unset;
}
}
}
</style>
29 changes: 24 additions & 5 deletions src/lib/layout/coverTitle.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,20 @@
<script lang="ts">
import { isSmallViewport } from '$lib/stores/viewport';
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
import { Typography, Button, Icon, Layout } from '@appwrite.io/pink-svelte';

export let href: string | null = null;
let {
href = null,
children = null,
backOnlyDesktop = false,
...restProps
}: {
href?: string | null;
children?: Snippet;
backOnlyDesktop?: boolean;
} & HTMLAttributes<HTMLDivElement> = $props();
</script>

<Layout.Stack
Expand All @@ -12,10 +23,18 @@
direction="row"
alignItems="center"
justifyContent="center"
{...$$restProps}>
style={backOnlyDesktop && $isTabletViewport ? 'margin-inline-start: -2.5rem;' : ''}
{...restProps}>
{#if href}
<span style:position="relative">
<Button.Anchor size="s" icon variant="text" {href} aria-label="page back">
<Button.Anchor
{href}
icon
size="s"
variant="text"
aria-label="page back"
disabled={backOnlyDesktop && $isTabletViewport}
style={backOnlyDesktop && $isTabletViewport ? 'visibility: hidden' : ''}>
<Icon icon={IconChevronLeft} />
</Button.Anchor>
</span>
Expand All @@ -25,6 +44,6 @@
truncate
color="--fgcolor-neutral-primary"
size={$isSmallViewport ? 'm' : 'l'}>
<slot />
{@render children?.()}
</Typography.Title>
</Layout.Stack>
2 changes: 1 addition & 1 deletion src/lib/layout/footer.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,7 @@
}
}

:global(main:has(.wide-screen-wrapper)) footer {
:global(main:has(.databases-spreadsheet)) footer {
margin-inline-start: 2rem !important;
}
</style>
15 changes: 11 additions & 4 deletions src/lib/layout/shell.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,10 +305,17 @@
}
}

@media (max-width: 768px) {
.main-content:not(:has(.wide-screen-wrapper)) {
width: 100%;
position: fixed;
:global(.console-container) {
@media (min-width: 1024px) {
padding-inline-start: var(--base-32, 32px);
}

@media (min-width: 1085px) {
padding-inline-start: calc(var(--base-32, 32px) - 0.5rem);
}

@media (min-width: 1280px) {
padding-inline-start: calc(var(--base-32, 32px) - 0.75rem);
}
}
}
Expand Down
Loading