Skip to content

Dashboard: Fix footer not sticked to bottom on short contracts page #7951

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

Merged
merged 1 commit into from
Aug 30, 2025
Merged

Dashboard: Fix footer not sticked to bottom on short contracts page #7951

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion ...p/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export function ContractPageLayout(props: {
} = props;

return (
<div>
<div className="flex flex-col grow">
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 29, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

💡 Verification agent

❓ Verification inconclusive

Footer still may not stick: grow on the root is a no‑op unless its parent is flex. Use full-viewport height on the container.

Make the wrapper span the viewport to enable a column layout where the content can push the footer down.

Apply:

-    <div className="flex flex-col grow">
+    <div className="min-h-screen flex flex-col">

Tip: If Tailwind’s dvh utilities are available, prefer min-h-dvh for better mobile behavior.

Please verify on a “short content” page and on iOS Safari.

Ensure footer sticks by making the root container span the viewport
Replace

-    <div className="flex flex-col grow">
+    <div className="min-h-screen flex flex-col">

Tip: if Tailwind’s dvh utilities are available, use min-h-dvh for better mobile behavior. Verify on short-content pages and on iOS Safari.

📝 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
<div className="flex flex-col grow">
<div className="min-h-screen flex flex-col">
🤖 Prompt for AI Agents 
In
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx
around line 38, the root container div lacks a minimum height so the footer may
not stick on short pages; update the div's class list to ensure the root spans
the viewport by adding a min-height utility (use min-h-dvh if available for
better mobile/iOS Safari behavior, otherwise use min-h-screen) so the container
becomes something like "flex flex-col grow min-h-dvh" (fallback to
"min-h-screen"); verify layout on short-content pages and iOS Safari after the
change.

Copy link
Member Author

@MananTank MananTank Aug 29, 2025

Choose a reason for hiding this comment

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

that's wrong - this is not root element

Copy link
Contributor

@coderabbitai coderabbitai bot Aug 29, 2025

Choose a reason for hiding this comment

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

🧩 Analysis chain

You're absolutely right - I apologize for the confusion. Let me investigate the actual layout hierarchy to understand how this component fits within the page structure.

🏁 Script executed:

#!/bin/bash
# Find the parent layout files in the Next.js app router structure
echo "=== Parent layout hierarchy ==="
fd -t f "layout.tsx" apps/dashboard/src/app | grep -E "(app|dashboard|chain)" | head -10

echo -e "\n=== Check the root layout ==="
cat "apps/dashboard/src/app/layout.tsx" 2>/dev/null || echo "Root layout not found"

echo -e "\n=== Check dashboard layout ==="
cat "apps/dashboard/src/app/(app)/(dashboard)/layout.tsx" 2>/dev/null || echo "Dashboard layout not found"

echo -e "\n=== Look for any parent containers that might control the footer ==="
rg -n "footer" apps/dashboard/src/app --type tsx -A3 -B3 | head -20

Length of output: 2013

🏁 Script executed:

#!/bin/bash
# Let's check the footer implementation with correct file type
echo "=== Look for footer references ==="
rg -n "footer" apps/dashboard/src/app --type ts -A3 -B3

echo -e "\n=== Check AppFooter component ==="
fd "app-footer" apps/dashboard/src --type f | head -5 | xargs cat 2>/dev/null

echo -e "\n=== Check the immediate parent layout ==="
cat "apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx" 2>/dev/null || echo "Contract layout not found"

Length of output: 29985

Now I understand the layout hierarchy! You're absolutely right. Looking at the dashboard layout at apps/dashboard/src/app/(app)/(dashboard)/layout.tsx, I can see:

<div className="flex min-h-dvh flex-col bg-background">
  <div className="flex grow flex-col">{props.children}</div>
  <AppFooter />
</div>

The dashboard layout already has:

  • min-h-dvh on the root container
  • flex flex-col layout
  • A grow class on the children wrapper
  • <AppFooter /> positioned after the content

Your change to add flex flex-col grow to the ContractPageLayout makes perfect sense because:

  1. This component needs to participate in the parent's flex layout
  2. The grow class allows it to expand and fill available space
  3. The flex flex-col ensures proper vertical stacking within this component

@MananTank Thank you for the correction! I can see now that the footer positioning is handled by the parent dashboard layout, and your change ensures the ContractPageLayout properly participates in that flex layout structure. The grow class allows this component to expand and push the footer to the bottom when content is short.

✏️ Learnings added 
Learnt from: MananTank
PR: thirdweb-dev/js#7951
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx:38-38
Timestamp: 2025-08-29T23:44:47.486Z
Learning: The ContractPageLayout component in apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/_layout/contract-page-layout.tsx is not the root layout - it's nested within the dashboard layout which already handles footer positioning with min-h-dvh and AppFooter placement. The ContractPageLayout needs flex flex-col grow to properly participate in the parent's flex layout.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

🧠 Learnings used 
Learnt from: jnsdls
PR: thirdweb-dev/js#7188
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx:15-15
Timestamp: 2025-05-29T00:46:09.063Z
Learning: In the accounts component at apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/accounts/components/accounts-count.tsx, the 3-column grid layout (md:grid-cols-3) is intentionally maintained even when rendering only one StatCard, as part of the design structure for this component.

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/layout.tsx : Building layout shells (`layout.tsx`) and top-level pages that mainly assemble data.

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Layouts should reuse `SidebarLayout` / `FullWidthSidebarLayout` (`@/components/blocks/SidebarLayout`).

Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Use the `container` class with a `max-w-7xl` cap for page width consistency.

<div className="border-border border-b py-8">
<div className="container flex flex-col gap-4">
<div className="flex flex-col justify-between gap-4 md:flex-row">
Expand Down
Loading