Skip to content

Commit 2450c0c

Browse files
lg-epitechlg-epitech
authored
Merge pull request #160 from PoCInnovation/153-dashboard-responsivity
fix(frontend): users policies page responsiveness
2 parents 4f657f3 + f243c97 commit 2450c0c

5 files changed

Lines changed: 29 additions & 29 deletions

File tree

‎frontend/app/components/dashboard/provision-page.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -177,12 +177,12 @@ export default function ProvisionPage() {
177177

178178
if (!hasCreatePolicy) {
179179
return (
180-
<div className="h-full p-8">
181-
<div className="mb-8">
182-
<h1 className="mb-2 font-mono text-3xl font-bold tracking-tight text-balance">
180+
<div className="h-full p-4 md:p-8 min-w-0">
181+
<div className="mb-6 md:mb-8">
182+
<h1 className="mb-2 font-mono text-2xl md:text-3xl font-bold tracking-tight text-balance">
183183
Provision Virtual Machine
184184
</h1>
185-
<p className="text-muted-foreground">
185+
<p className="text-sm md:text-base text-muted-foreground">
186186
Configure and deploy a new virtual machine instance
187187
</p>
188188
</div>
@@ -203,19 +203,21 @@ export default function ProvisionPage() {
203203
: (onlineSlaves.find((s) => s.id === selectedTarget)?.name ?? "slave");
204204

205205
return (
206-
<div className="h-full p-8">
207-
<div className="mb-8">
208-
<h1 className="mb-2 font-mono text-3xl font-bold tracking-tight text-balance">
206+
<div className="h-full p-4 md:p-8 min-w-0">
207+
<div className="mb-6 md:mb-8">
208+
<h1 className="mb-2 font-mono text-2xl md:text-3xl font-bold tracking-tight text-balance">
209209
Provision Virtual Machine
210210
</h1>
211-
<p className="text-muted-foreground">
211+
<p className="text-sm md:text-base text-muted-foreground">
212212
Configure and deploy a new virtual machine instance
213213
</p>
214214
</div>
215215

216216
{hasSlaves && (
217-
<div className="mb-8">
218-
<h2 className="mb-4 font-mono text-lg font-bold">Target Host</h2>
217+
<div className="mb-6 md:mb-8">
218+
<h2 className="mb-3 md:mb-4 font-mono text-base md:text-lg font-bold">
219+
Target Host
220+
</h2>
219221
<div className="flex flex-wrap gap-2">
220222
<button
221223
type="button"
@@ -280,8 +282,8 @@ export default function ProvisionPage() {
280282
title="Host Resources Hidden"
281283
>
282284
{isAutoMode && clusterInfo && (
283-
<div className="mb-8">
284-
<h2 className="mb-4 font-mono text-lg font-bold">
285+
<div className="mb-6 md:mb-8">
286+
<h2 className="mb-3 md:mb-4 font-mono text-base md:text-lg font-bold">
285287
Available Resources
286288
<span className="ml-2 text-sm font-normal text-muted-foreground">
287289
across {clusterInfo.nodes.length} node
@@ -326,8 +328,8 @@ export default function ProvisionPage() {
326328
</div>
327329
)}
328330
{!isAutoMode && targetHostInfo && (
329-
<div className="mb-8">
330-
<h2 className="mb-4 font-mono text-lg font-bold">
331+
<div className="mb-6 md:mb-8">
332+
<h2 className="mb-3 md:mb-4 font-mono text-base md:text-lg font-bold">
331333
Available Resources
332334
{targetLabel && (
333335
<span className="ml-2 text-sm font-normal text-muted-foreground">
@@ -344,8 +346,8 @@ export default function ProvisionPage() {
344346
)}
345347
</PolicyGate>
346348

347-
<div className="grid gap-6 lg:grid-cols-3 pb-8">
348-
<div className="lg:col-span-2 space-y-6">
349+
<div className="grid gap-4 md:gap-6 lg:grid-cols-3 pb-8">
350+
<div className="lg:col-span-2 space-y-4 md:space-y-6 min-w-0">
349351
<Card className="border-border bg-card">
350352
<CardHeader>
351353
<CardTitle className="flex items-center gap-2">
@@ -383,7 +385,7 @@ export default function ProvisionPage() {
383385
Select the base image for your virtual machine
384386
</CardDescription>
385387
</CardHeader>
386-
<CardContent className="w-full">
388+
<CardContent className="w-full overflow-hidden">
387389
<PolicyGate
388390
requiredPolicies={[Policy.IMAGES_GET]}
389391
title="Image Registry Hidden"
@@ -544,7 +546,7 @@ export default function ProvisionPage() {
544546
</Card>
545547
</div>
546548

547-
<div className="space-y-6 sticky top-8 self-start">
549+
<div className="space-y-4 md:space-y-6 lg:sticky lg:top-8 lg:self-start min-w-0">
548550
<Card className="border-border bg-card">
549551
<CardHeader>
550552
<CardTitle>Configuration Summary</CardTitle>

‎frontend/app/components/dashboard/user-card.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -63,14 +63,14 @@ export function UserCard({
6363
)}
6464
>
6565
<CardHeader className="pb-3">
66-
<div className="flex items-start justify-between">
67-
<div className="flex-1">
66+
<div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
67+
<div className="min-w-0">
6868
<CardTitle className="text-lg font-semibold">{user.user}</CardTitle>
6969
<p className="text-xs text-muted-foreground mt-1">
7070
Created {formatDateOnly(user.created_at, timeZone)}
7171
</p>
7272
</div>
73-
<div className="flex items-center gap-2">
73+
<div className="flex items-center gap-2 flex-shrink-0 flex-wrap">
7474
<PolicyGate requiredPolicies={Policy.USERS_UPDATE_POLICIES}>
7575
<DropdownMenu>
7676
<DropdownMenuTrigger asChild>

‎frontend/app/components/dashboard/users-policies-page.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,8 @@ export default function UsersPoliciesPage() {
5252
<PolicyGate requiredPolicies={Policy.USERS_GET}>
5353
<DndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
5454
<div className="flex h-full overflow-hidden">
55-
{/* Left Panel - Policies */}
5655
<div
57-
className="border-r border-border bg-sidebar/30 flex flex-col overflow-hidden"
56+
className="hidden md:flex border-r border-border bg-sidebar/30 flex-col overflow-hidden"
5857
style={{ width: `${leftPanelWidth}%` }}
5958
>
6059
<div className="p-6 border-b border-border flex-shrink-0">
@@ -102,9 +101,8 @@ export default function UsersPoliciesPage() {
102101
</div>
103102
</div>
104103

105-
{/* Resizer */}
106104
<div
107-
className="w-2 bg-border hover:bg-primary cursor-col-resize transition-colors flex-shrink-0 relative group"
105+
className="hidden md:block w-2 bg-border hover:bg-primary cursor-col-resize transition-colors flex-shrink-0 relative group"
108106
onMouseDown={(e) => handleResizeStart(e.clientX)}
109107
>
110108
<div className="absolute inset-y-0 left-1/2 -translate-x-1/2 w-1 bg-transparent group-hover:bg-primary/50 transition-colors" />

‎frontend/app/components/dashboard/vm-image-picker.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -156,21 +156,21 @@ function ImagePicker({
156156

157157
<div className="flex h-72">
158158
{/* Left: Family filter sidebar */}
159-
<div className="border-r flex flex-col py-1 w-32 shrink-0 bg-muted/10">
159+
<div className="border-r flex flex-col py-1 shrink-0 bg-muted/10">
160160
{families.map((family) => (
161161
<button
162162
key={family}
163163
type="button"
164164
onClick={() => setActiveFamily(family)}
165165
className={cn(
166-
"flex items-center gap-2 px-3 py-2 text-sm text-left transition-colors hover:bg-muted",
166+
"flex items-center justify-center sm:justify-start gap-2 px-2 sm:px-3 py-2 text-sm text-left transition-colors hover:bg-muted",
167167
activeFamily === family
168168
? "bg-muted text-foreground font-medium border-l-2 border-primary"
169169
: "text-muted-foreground border-l-2 border-transparent",
170170
)}
171171
>
172172
{getFamilyIcon(family)}
173-
<span className="truncate">{family}</span>
173+
<span className="truncate hidden sm:inline">{family}</span>
174174
</button>
175175
))}
176176
</div>

‎frontend/app/routes/dashboard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function DashboardLayout() {
1515
<ProtectedRoute>
1616
<div className="flex h-screen overflow-hidden">
1717
<DashboardSidenav />
18-
<main className="flex-1 overflow-y-auto">
18+
<main className="flex-1 overflow-y-auto min-w-0">
1919
<Outlet />
2020
</main>
2121
</div>

0 commit comments

Comments
 (0)