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 11 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
9 changes: 3 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,8 @@
export let offset = 0;
export let logs: Models.LogList;
export let insideSideSheet = false;
export let databasesScreen = false;
export let databasesMainScreen = false;
export let expanded = false;
export let useCreateLinkForPagination = true;

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

<Container
{databasesScreen}
{insideSideSheet}
expanded={databasesScreen && !insideSideSheet}
slotSpacing={databasesScreen && !insideSideSheet}>
<Container {insideSideSheet} {databasesMainScreen} expanded={expanded && !insideSideSheet}>
{#if logs.total}
<div>
<Table.Root {columns} let:root>
Expand Down
26 changes: 14 additions & 12 deletions src/lib/layout/animatedTitle.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { isSmallViewport } from '$lib/stores/viewport';
import { 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';
Expand All @@ -13,12 +13,10 @@
}: {
href?: string | null;
collapsed?: boolean;
children: Snippet;
children?: Snippet;
} & 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)');
</script>

Expand All @@ -29,19 +27,22 @@
alignItems="center"
justifyContent="center"
{...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 +63,6 @@
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
line-height: 130%;
}
</style>
43 changes: 6 additions & 37 deletions src/lib/layout/container.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,17 @@

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;
Expand All @@ -41,14 +33,10 @@
<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 Down Expand Up @@ -100,37 +88,18 @@
}
}
}

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

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

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

&.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;
}
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: 2.5px;
}
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

Likely unit bug: 2.5px should be 2.5rem.

padding-left: 2.5px is almost certainly meant to align with the -2.5rem title offset and the extra 3rem top padding. Using px causes visible misalignment.

Apply:

-        &.adjustForSpreadsheet {
-            padding-left: 2.5px;
-        }
+        &.adjustForSpreadsheet {
+            padding-left: 2.5rem;
+        }
📝 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
&.adjustForSpreadsheet {
padding-left: 2.5px;
}
&.adjustForSpreadsheet {
padding-left: 2.5rem;
}
🤖 Prompt for AI Agents 
In src/lib/layout/cover.svelte around lines 126 to 128, the CSS rule uses
padding-left: 2.5px which is likely a unit bug causing misalignment with the
-2.5rem title offset and 3rem top padding; change the unit from px to rem
(padding-left: 2.5rem) so the spacing aligns with the other rem-based
measurements and preserves responsive scaling.

}
.expanded-slot {
margin-inline: 3rem !important;
@media (max-width: 768px) {
margin-inline: 0 !important;
&.databasesMainScreen {
@media (min-width: 1024px) {
margin: unset;
}
}
}
</style>
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>
7 changes: 3 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,9 @@
}
}

@media (max-width: 768px) {
.main-content:not(:has(.wide-screen-wrapper)) {
width: 100%;
position: fixed;
@media (min-width: 1024px) {
:global(.console-container) {
padding-left: 45px; /* 255px - 210px */
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
const databaseId = page.params.database;
</script>

<Container databasesMainScreen>
<Container>
<Layout.Stack direction="row" justifyContent="space-between">
<Layout.Stack direction="row" alignItems="center">
<SearchQuery placeholder="Search by name or ID" />
Expand Down
2 changes: 1 addition & 1 deletion ...s/(console)/project-[region]-[project]/databases/database-[database]/backups/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@
});
</script>

<Container size="xxl" databasesMainScreen>
<Container size="xxl">
<div class="backups-page u-flex u-gap-32 u-flex-vertical-mobile">
{#if !isDisabled}
<div class="u-flex-vertical u-gap-16 policies-holder-card">
Expand Down
2 changes: 1 addition & 1 deletion src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
].filter((tab) => !tab.disabled);
</script>

<Cover databasesMainScreen>
<Cover>
<svelte:fragment slot="header">
<CoverTitle
style="margin-inline-start: -2.5rem;"
Expand Down
2 changes: 1 addition & 1 deletion .../(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@
</script>

{#if $database}
<Container databasesMainScreen>
<Container>
<CardGrid>
<svelte:fragment slot="title">{$database.name}</svelte:fragment>
<svelte:fragment slot="aside">
Expand Down
6 changes: 2 additions & 4 deletions ...s/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,7 @@
sortedTables?.find((table: Models.Table) => table.$id === tableId)
);
const isTablesScreen = $derived(page.route.id.endsWith('table-[table]'));
const isMainDatabaseScreen = $derived(page.route.id.endsWith('database-[database]'));
const isTablesScreen = $derived(page.route.id.includes('table-[table]'));
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Guard page.route.id before calling .includes to avoid runtime crashes

page.route.id can be undefined during initial render; .includes would throw.

-const isTablesScreen = $derived(page.route.id.includes('table-[table]'));
+const isTablesScreen = $derived.by(() => !!page.route.id?.includes('table-[table]'));

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In
src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
around line 52, the expression calls page.route.id.includes(...) which can throw
if page.route.id is undefined; update the derived store to first guard that
page.route and page.route.id are defined (and a string) before calling .includes
(e.g. use an explicit conditional or optional chaining) and return a safe
default (false) when id is missing so the component won't crash on initial
render.

async function loadTables() {
tables = await sdk.forProject(region, project).tablesDB.listTables({
Expand Down Expand Up @@ -176,7 +174,7 @@
</Layout.Stack>
</section>
</Sidebar.Base>
{:else if data?.database?.name && !isMainDatabaseScreen}
{:else if data?.database?.name && isTablesScreen}
<Navbar.Base>
<div slot="left">
<Layout.Stack direction="row" alignItems="center" gap="s">
Expand Down
4 changes: 2 additions & 2 deletions ...ject-[region]-[project]/databases/database-[database]/table-[table]/activity/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,6 @@
export let data: PageData;
</script>

<div class="wide-screen-wrapper databases-spreadsheet">
<Activity {...data} databasesScreen />
<div class="databases-spreadsheet">
<Activity {...data} databasesMainScreen />
</div>
Loading
Loading