Skip to content

Commit 27eefa0

Browse files
minkinadminkinad
committed
StackMIREA-0009 // Улучшена адаптивность StackMIREA: сохранены 5 карточек в ряд на ПК, исправлены mobile-лейауты и переносы длинного контента в docs/меню/шапке/футере/карточках для удобного и стабильного просмотра с телефона
1 parent 64c5ec4 commit 27eefa0

File tree

9 files changed

+57
-30
lines changed

9 files changed

+57
-30
lines changed

‎app/docs/[...slug]/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export default async function DocPage({ params }: DocPageProps) {
5757
<>
5858
<MobileDocsMenu groups={sidebarGroups} currentPath={doc.href} />
5959

60-
<div className="mx-auto grid w-full max-w-[1440px] gap-8 px-4 py-8 sm:px-6 lg:grid-cols-[280px_minmax(0,1fr)_220px] lg:px-8">
60+
<div className="mx-auto grid w-full max-w-[1440px] gap-8 px-4 py-8 sm:px-6 lg:grid-cols-[260px_minmax(0,1fr)] lg:px-8 xl:grid-cols-[280px_minmax(0,1fr)_220px]">
6161
<Sidebar groups={sidebarGroups} currentPath={doc.href} />
6262

6363
<article className="min-w-0 pb-16">

‎app/docs/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@ export default function DocsIndexPage() {
3131
<li key={item.href}>
3232
<Link
3333
href={item.href}
34-
className="inline-flex items-center gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
34+
className="flex items-start gap-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
3535
>
36-
<ArrowRight className="size-3.5" />
37-
{item.title}
36+
<ArrowRight className="mt-1 size-3.5 shrink-0" />
37+
<span className="break-words leading-6">{item.title}</span>
3838
</Link>
3939
</li>
4040
))}

‎app/not-found.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,17 @@ export default function NotFoundPage() {
66
<p className="mb-3 text-sm uppercase tracking-[0.12em] text-muted-foreground">404</p>
77
<h1 className="mb-4 text-3xl font-semibold tracking-tight">Page not found</h1>
88
<p className="mb-8 text-muted-foreground">Запрошенная страница не найдена или была перемещена.</p>
9-
<div className="flex gap-3">
10-
<Link href="/" className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground">
9+
<div className="flex w-full flex-wrap items-center justify-center gap-3 sm:w-auto">
10+
<Link
11+
href="/"
12+
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground sm:min-w-[130px]"
13+
>
1114
На главную
1215
</Link>
13-
<Link href="/docs" className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground">
16+
<Link
17+
href="/docs"
18+
className="rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground sm:min-w-[130px]"
19+
>
1420
Открыть docs
1521
</Link>
1622
</div>

‎app/page.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -213,22 +213,22 @@ export default function HomePage() {
213213
</div>
214214
</section>
215215

216-
<section className="mt-10 grid gap-4 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5">
216+
<section className="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
217217
{tracks.map((track, index) => {
218218
const Icon = track.icon;
219219
return (
220220
<Link
221221
key={track.title}
222222
href={track.href}
223-
className="group rounded-2xl border border-border/70 bg-card/70 p-5 transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:bg-card"
223+
className="group flex h-full flex-col rounded-2xl border border-border/70 bg-card/70 p-4 transition-all hover:-translate-y-0.5 hover:border-primary/40 hover:bg-card sm:p-5"
224224
style={{ animation: "fade-up 660ms ease-out forwards", animationDelay: `${120 + index * 100}ms` }}
225225
>
226226
<div className="mb-4 inline-flex rounded-lg border border-border/70 bg-background/70 p-2 text-muted-foreground transition-colors group-hover:text-primary">
227227
<Icon className="size-5" />
228228
</div>
229-
<h2 className="text-lg font-semibold tracking-tight">{track.title}</h2>
230-
<p className="mt-2 text-sm leading-6 text-muted-foreground">{track.subtitle}</p>
231-
<span className="mt-5 inline-flex items-center gap-1.5 text-sm text-primary">
229+
<h2 className="text-base font-semibold leading-snug tracking-tight break-words">{track.title}</h2>
230+
<p className="mt-2 break-words text-sm leading-6 text-muted-foreground">{track.subtitle}</p>
231+
<span className="mt-auto pt-5 inline-flex items-center gap-1.5 text-sm text-primary">
232232
Перейти
233233
<ArrowRight className="size-3.5" />
234234
</span>

‎components/layout/Footer.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,21 @@ const CONTENT_LICENSE_URL = `${REPO_URL}/blob/${DEFAULT_BRANCH}/CC-BY-NC-SA-4.0`
77
export function Footer() {
88
return (
99
<footer className="border-t border-border/70 bg-background/90">
10-
<div className="mx-auto flex w-full max-w-[1440px] flex-col gap-2 px-4 py-6 text-sm text-muted-foreground sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:px-6 lg:px-8">
11-
<p>{SITE_NAME} Docs</p>
12-
<p>
10+
<div className="mx-auto flex w-full max-w-[1440px] flex-col gap-2 px-4 py-6 text-center text-sm text-muted-foreground sm:flex-row sm:flex-wrap sm:items-center sm:justify-between sm:px-6 sm:text-left lg:px-8">
11+
<p className="break-words">{SITE_NAME} Docs</p>
12+
<p className="break-words">
1313
Весь контент сайта защищен лицензией{" "}
1414
<Link href={CONTENT_LICENSE_URL} target="_blank" rel="noreferrer" className="transition-colors hover:text-foreground">
1515
CC-BY-NC-SA-4.0
1616
</Link>
1717
.
1818
</p>
19-
<Link href={REPO_URL} target="_blank" rel="noreferrer" className="transition-colors hover:text-foreground">
19+
<Link
20+
href={REPO_URL}
21+
target="_blank"
22+
rel="noreferrer"
23+
className="break-all transition-colors hover:text-foreground"
24+
>
2025
{REPO_OWNER}/{REPO_NAME}
2126
</Link>
2227
</div>

‎components/layout/Header.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@ export function Header() {
99
return (
1010
<header className="sticky top-0 z-50 border-b border-border/80 bg-background/92 backdrop-blur-md">
1111
<div className="mx-auto flex h-14 w-full max-w-[1440px] items-center justify-between px-4 sm:px-6 lg:px-8">
12-
<div className="flex items-center gap-4">
13-
<Link href="/" className="inline-flex items-center gap-2 whitespace-nowrap text-sm font-semibold tracking-tight text-foreground">
12+
<div className="flex min-w-0 items-center gap-4">
13+
<Link href="/" className="inline-flex min-w-0 items-center gap-2 text-sm font-semibold tracking-tight text-foreground">
1414
<Image src={siteLogo} alt={`${SITE_NAME} logo`} width={20} height={20} className="rounded-sm" priority />
15-
{SITE_NAME}
15+
<span className="truncate">{SITE_NAME}</span>
1616
</Link>
1717

1818
<nav className="hidden items-center gap-2 md:flex">

‎components/layout/MobileDocsMenu.tsx‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@ export function MobileDocsMenu({ groups, currentPath }: MobileDocsMenuProps) {
6969
<BookOpenText className="size-4" />
7070
</div>
7171
<div className="min-w-0 text-left">
72-
<p className="truncate text-sm font-medium">{activeGroup?.title ?? "Documentation"}</p>
73-
<p className="truncate text-xs text-muted-foreground">Current section</p>
72+
<p className="break-words text-sm font-medium leading-5">{activeGroup?.title ?? "Documentation"}</p>
73+
<p className="text-xs text-muted-foreground">Current section</p>
7474
</div>
7575
<ChevronDown className="size-4 text-muted-foreground" />
7676
</div>
@@ -80,8 +80,8 @@ export function MobileDocsMenu({ groups, currentPath }: MobileDocsMenuProps) {
8080
<Tag className="size-4" />
8181
</div>
8282
<div className="min-w-0 text-left">
83-
<p className="truncate text-sm font-medium">Latest Version</p>
84-
<p className="truncate text-xs text-muted-foreground">Static export ready</p>
83+
<p className="text-sm font-medium">Latest Version</p>
84+
<p className="text-xs text-muted-foreground">Static export ready</p>
8585
</div>
8686
<ChevronDown className="size-4 text-muted-foreground" />
8787
</div>
@@ -91,7 +91,7 @@ export function MobileDocsMenu({ groups, currentPath }: MobileDocsMenuProps) {
9191
<div className="pointer-events-none absolute left-0 top-0 z-10 h-3 w-full bg-gradient-to-b from-background to-transparent" />
9292
<div className="pointer-events-none absolute bottom-0 left-0 z-10 h-3 w-full bg-gradient-to-t from-background to-transparent" />
9393

94-
<nav aria-label="Mobile docs navigation" className="h-[calc(100vh-19rem)] overflow-y-auto pb-4 pr-1">
94+
<nav aria-label="Mobile docs navigation" className="max-h-[65vh] overflow-y-auto pb-4 pr-1">
9595
<ul className="space-y-2">
9696
{groups.map((group) => {
9797
const containsActive = group.items.some(
@@ -111,8 +111,10 @@ export function MobileDocsMenu({ groups, currentPath }: MobileDocsMenuProps) {
111111
: "text-foreground hover:bg-muted/70 hover:text-foreground"
112112
)}
113113
>
114-
<span className="truncate">{group.title}</span>
115-
<ChevronRight className={cn("size-4 transition-transform", expanded ? "rotate-90" : "rotate-0")} />
114+
<span className="min-w-0 break-words pr-2 leading-5">{group.title}</span>
115+
<ChevronRight
116+
className={cn("mt-0.5 size-4 shrink-0 transition-transform", expanded ? "rotate-90" : "rotate-0")}
117+
/>
116118
</button>
117119

118120
{expanded ? (
@@ -126,13 +128,13 @@ export function MobileDocsMenu({ groups, currentPath }: MobileDocsMenuProps) {
126128
href={item.href}
127129
onClick={() => setIsOpen(false)}
128130
className={cn(
129-
"block rounded-md px-2 py-1.5 text-sm transition-colors",
131+
"block rounded-md px-2 py-1.5 text-sm leading-5 transition-colors",
130132
isActive
131133
? "bg-primary/12 font-medium text-primary"
132134
: "text-muted-foreground hover:bg-muted/70 hover:text-foreground"
133135
)}
134136
>
135-
{item.title}
137+
<span className="break-words">{item.title}</span>
136138
</Link>
137139
</li>
138140
);

‎components/ui/GitHubUserBadge.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export function GitHubUserBadge({ person, description, className }: GitHubUserBa
1616
target="_blank"
1717
rel="noreferrer"
1818
className={cn(
19-
"inline-flex items-center gap-3 rounded-xl border border-border/80 bg-card/60 px-3 py-2 transition-colors hover:border-primary/40",
19+
"inline-flex max-w-full items-center gap-3 overflow-hidden rounded-xl border border-border/80 bg-card/60 px-3 py-2 transition-colors hover:border-primary/40",
2020
className
2121
)}
2222
>
@@ -30,7 +30,7 @@ export function GitHubUserBadge({ person, description, className }: GitHubUserBa
3030
/>
3131
<span className="min-w-0">
3232
<span className="block truncate text-sm font-medium leading-tight text-foreground">@{person.github}</span>
33-
{description ? <span className="block text-xs text-muted-foreground">{description}</span> : null}
33+
{description ? <span className="block truncate text-xs text-muted-foreground">{description}</span> : null}
3434
</span>
3535
</Link>
3636
);

‎styles/docs.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626

2727
.docs-prose p {
2828
@apply leading-7 text-foreground;
29+
overflow-wrap: anywhere;
2930
}
3031

3132
.docs-prose a {
@@ -47,6 +48,19 @@
4748

4849
.docs-prose blockquote {
4950
@apply border-l-2 border-border pl-4 italic text-muted-foreground;
51+
overflow-wrap: anywhere;
52+
}
53+
54+
.docs-prose li {
55+
overflow-wrap: anywhere;
56+
}
57+
58+
.docs-prose table {
59+
display: block;
60+
width: max-content;
61+
max-width: 100%;
62+
overflow-x: auto;
63+
border-collapse: collapse;
5064
}
5165

5266
.docs-prose img {

0 commit comments

Comments
 (0)