Skip to content

Commit bd54f01

Browse files
AmanVarshney01AmanVarshney01
committed
fix(web): footer overflow
1 parent 1aa1525 commit bd54f01

File tree

2 files changed

+55
-58
lines changed

2 files changed

+55
-58
lines changed

‎apps/web/src/app/(home)/_components/footer.tsx

Lines changed: 31 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -3,37 +3,36 @@ import Link from "next/link";
33

44
const Footer = () => {
55
return (
6-
<footer className="relative w-full border-border border-t ">
7-
<div className="mx-auto px-4 py-12 sm:px-6">
8-
<div className="mb-12 grid gap-8 md:grid-cols-3">
9-
<div>
10-
<h3 className="mb-4 flex items-center gap-2 font-semibold text-base text-foreground">
6+
<footer className="relative w-full border-border border-t">
7+
<div className="container mx-auto px-4 py-8 sm:px-6 sm:py-12 lg:px-8">
8+
<div className="mb-8 grid gap-8 sm:mb-12 sm:grid-cols-2 lg:grid-cols-3 lg:gap-12">
9+
<div className="sm:col-span-2 lg:col-span-1">
10+
<h3 className="mb-3 flex items-center gap-2 font-semibold text-base text-foreground sm:mb-4">
1111
<span>Better-T Stack</span>
1212
</h3>
13-
<p className="text-muted-foreground leading-relaxed">
13+
<p className="mb-4 text-muted-foreground text-sm leading-relaxed sm:mb-6 sm:text-base lg:pr-4">
1414
Type-safe, modern TypeScript scaffolding for full-stack web
1515
development
1616
</p>
17-
18-
<div className="mt-4 flex space-x-3">
17+
<div className="flex space-x-4">
1918
<Link
2019
href="https://github.com/better-t-stack/create-better-t-stack"
2120
target="_blank"
22-
className="text-muted-foreground transition-colors hover:text-foreground"
23-
aria-label="GitHub"
21+
className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
22+
aria-label="GitHub Repository"
2423
>
25-
<Github size={18} />
24+
<Github size={20} />
2625
</Link>
2726
<Link
2827
href="https://www.npmjs.com/package/create-better-t-stack"
2928
target="_blank"
30-
className="text-muted-foreground transition-colors hover:text-foreground"
31-
aria-label="NPM"
29+
className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
30+
aria-label="NPM Package"
3231
>
3332
<svg
3433
viewBox="0 0 24 24"
35-
width="18"
36-
height="18"
34+
width="20"
35+
height="20"
3736
fill="currentColor"
3837
>
3938
<title>NPM</title>
@@ -44,15 +43,15 @@ const Footer = () => {
4443
</div>
4544

4645
<div>
47-
<h3 className="mb-4 font-semibold text-base text-foreground">
46+
<h3 className="mb-3 font-semibold text-base text-foreground sm:mb-4">
4847
Resources
4948
</h3>
50-
<ul className="space-y-2.5 text-muted-foreground">
49+
<ul className="space-y-2 text-muted-foreground text-sm sm:space-y-3 sm:text-base">
5150
<li>
5251
<Link
5352
target="_blank"
5453
href="https://github.com/better-t-stack/create-better-t-stack"
55-
className="transition-colors hover:text-primary"
54+
className="inline-block transition-colors hover:text-primary focus:text-primary focus:outline-none"
5655
>
5756
GitHub Repository
5857
</Link>
@@ -61,7 +60,7 @@ const Footer = () => {
6160
<Link
6261
target="_blank"
6362
href="https://www.npmjs.com/package/create-better-t-stack"
64-
className="transition-colors hover:text-primary"
63+
className="inline-block transition-colors hover:text-primary focus:text-primary focus:outline-none"
6564
>
6665
NPM Package
6766
</Link>
@@ -70,49 +69,40 @@ const Footer = () => {
7069
<Link
7170
target="_blank"
7271
href="https://my-better-t-app-client.pages.dev/"
73-
className="transition-colors hover:text-primary"
72+
className="inline-block transition-colors hover:text-primary focus:text-primary focus:outline-none"
7473
>
7574
Demo Application
7675
</Link>
7776
</li>
78-
{/*
79-
<li>
80-
<Link
81-
target="_blank"
82-
href="https://github.com/better-t-stack/create-better-t-stack#readme"
83-
className="hover:text-primary transition-colors"
84-
>
85-
Documentation
86-
</Link>
87-
</li>
88-
*/}
8977
</ul>
9078
</div>
9179

9280
<div>
93-
<h3 className="mb-4 font-semibold text-base text-foreground">
81+
<h3 className="mb-3 font-semibold text-base text-foreground sm:mb-4">
9482
Contact
9583
</h3>
96-
<div className="space-y-2.5 text-muted-foreground">
97-
<p className="flex items-center">
98-
<span className="mr-2 rounded bg-muted px-2 py-1 text-sm">
84+
<div className="space-y-3 text-muted-foreground text-sm sm:space-y-4 sm:text-base">
85+
<div className="flex flex-col gap-2 sm:flex-row sm:items-center">
86+
<span className="inline-flex w-fit rounded bg-muted px-2 py-1 font-mono text-xs sm:text-sm">
9987
$
10088
</span>
101-
<span>[email protected]</span>
102-
</p>
103-
<p className="mt-3">
89+
<span className="break-all sm:break-normal">
90+
[email protected]
91+
</span>
92+
</div>
93+
<p className="text-sm leading-relaxed sm:text-base">
10494
Have questions or feedback? Feel free to reach out or open an
10595
issue on GitHub.
10696
</p>
10797
</div>
10898
</div>
10999
</div>
110100

111-
<div className="mt-12 flex flex-col items-center justify-between gap-4 border-border border-t pt-6 sm:flex-row">
112-
<p className="text-muted-foreground text-sm">
101+
<div className="flex flex-col items-center justify-between gap-4 border-border border-t pt-6 sm:flex-row sm:gap-6 sm:pt-8">
102+
<p className="text-center text-muted-foreground text-xs sm:text-left sm:text-sm">
113103
© {new Date().getFullYear()} Better-T Stack. All rights reserved.
114104
</p>
115-
<p className="flex items-center gap-1.5 text-muted-foreground text-sm">
105+
<p className="flex items-center gap-1.5 text-muted-foreground text-xs sm:text-sm">
116106
Built with
117107
<span className="bg-gradient-to-r from-primary to-primary/80 bg-clip-text font-medium text-transparent">
118108
TypeScript

‎apps/web/src/app/(home)/page.tsx

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -162,14 +162,16 @@ export default function HomePage() {
162162
</div>
163163
</div>
164164

165-
<div className="mb-12 grid grid-cols-1 gap-4 md:grid-cols-3">
165+
<div className="mb-8 grid grid-cols-1 gap-4 sm:mb-12 sm:grid-cols-2 lg:grid-cols-3">
166166
<Link href="/new">
167-
<div className="group cursor-pointer rounded border border-border p-4">
167+
<div className="group cursor-pointer rounded border border-border p-4 transition-colors focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2 hover:bg-muted/50">
168168
<div className="flex items-center gap-2">
169-
<ChevronRight className="h-4 w-4 text-primary" />
170-
<span className=" font-semibold">STACK_BUILDER.SH</span>
169+
<ChevronRight className="h-4 w-4 text-primary transition-transform group-hover:translate-x-1" />
170+
<span className="font-semibold text-sm sm:text-base">
171+
STACK_BUILDER.SH
172+
</span>
171173
</div>
172-
<p className="mt-2 text-muted-foreground text-sm">
174+
<p className="mt-2 text-muted-foreground text-xs sm:text-sm">
173175
[EXEC] Interactive configuration wizard
174176
</p>
175177
</div>
@@ -180,20 +182,22 @@ export default function HomePage() {
180182
target="_blank"
181183
rel="noopener noreferrer"
182184
>
183-
<div className="group cursor-pointer rounded border border-border p-4">
184-
<div className="flex items-center justify-between">
185-
<div className="flex items-center gap-2">
186-
<Github className="h-4 w-4 text-primary" />
187-
<span className=" font-semibold">GITHUB_REPO.GIT</span>
185+
<div className="group cursor-pointer rounded border border-border p-4 transition-colors focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2 hover:bg-muted/50">
186+
<div className="flex items-start justify-between gap-3">
187+
<div className="flex min-w-0 flex-1 items-center gap-2">
188+
<Github className="h-4 w-4 flex-shrink-0 text-primary" />
189+
<span className="truncate font-semibold text-sm sm:text-base">
190+
GITHUB_REPO.GIT
191+
</span>
188192
</div>
189193
{stars !== null && !isLoadingStars && (
190-
<div className="flex items-center gap-1 rounded border border-border bg-muted/30 px-2 py-1 text-xs">
194+
<div className="flex flex-shrink-0 items-center gap-1 rounded border border-border bg-muted/30 px-2 py-1 text-xs">
191195
<Star className="h-3 w-3 text-accent" />
192-
{stars}
196+
<span className="tabular-nums">{stars}</span>
193197
</div>
194198
)}
195199
</div>
196-
<p className="mt-2 text-muted-foreground text-sm">
200+
<p className="mt-2 text-muted-foreground text-xs sm:text-sm">
197201
[LINK] Star the repository on GitHub
198202
</p>
199203
</div>
@@ -203,17 +207,20 @@ export default function HomePage() {
203207
href="https://discord.gg/ZYsbjpDaM5"
204208
target="_blank"
205209
rel="noopener noreferrer"
210+
className="sm:col-span-2 lg:col-span-1"
206211
>
207-
<div className="group cursor-pointer rounded border border-border p-4">
212+
<div className="group cursor-pointer rounded border border-border p-4 transition-colors focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2 hover:bg-muted/50">
208213
<div className="flex items-center gap-2">
209214
<Image
210215
src={discordLogo}
211216
alt="discord"
212-
className="h-4 w-4 invert-0 dark:invert"
217+
className="h-4 w-4 flex-shrink-0 invert-0 dark:invert"
213218
/>
214-
<span className=" font-semibold">DISCORD_CHAT.IRC</span>
219+
<span className="font-semibold text-sm sm:text-base">
220+
DISCORD_CHAT.IRC
221+
</span>
215222
</div>
216-
<p className="mt-2 text-muted-foreground text-sm">
223+
<p className="mt-2 text-muted-foreground text-xs sm:text-sm">
217224
[JOIN] Connect to developer community
218225
</p>
219226
</div>

0 commit comments

Comments
 (0)