From 920bf5775e7925dea60fae45480840202c2548ec Mon Sep 17 00:00:00 2001
From: Edouard Vanbelle <opensource@edouard.vanbelle.fr>
Date: Sun, 19 Jul 2026 17:24:42 +0200
Subject: [PATCH] fix(ui): quota edition: keep respect of design system

---
 .../src/lib/components/GroupVignette.svelte   |  4 ++
 .../src/lib/components/QuotaEditor.svelte     | 69 +++++++++++++++++++
 frontend/src/routes/admin/+page.svelte        | 10 ++-
 3 files changed, 81 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/GroupVignette.svelte b/frontend/src/lib/components/GroupVignette.svelte
index cd037789..0922dea4 100644
--- a/frontend/src/lib/components/GroupVignette.svelte
+++ b/frontend/src/lib/components/GroupVignette.svelte
@@ -117,6 +117,7 @@
 		align-items: center;
 		gap: var(--space-2);
 	}
+
 	.gv__avatar {
 		flex-shrink: 0;
 		display: inline-flex;
@@ -130,11 +131,13 @@
 		font-size: 0.85rem;
 		user-select: none;
 	}
+
 	.gv__text {
 		display: flex;
 		flex-direction: column;
 		min-width: 0;
 	}
+
 	.gv__name {
 		font-weight: var(--weight-semibold, 600);
 		color: var(--color-text);
@@ -142,6 +145,7 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
+
 	.gv__sub {
 		color: var(--color-text-muted);
 		font-size: 0.8125rem;
diff --git a/frontend/src/lib/components/QuotaEditor.svelte b/frontend/src/lib/components/QuotaEditor.svelte
index 3dc2aafe..bb7a4393 100644
--- a/frontend/src/lib/components/QuotaEditor.svelte
+++ b/frontend/src/lib/components/QuotaEditor.svelte
@@ -157,3 +157,72 @@
 		</button>
 	{/snippet}
 </Modal>
+
+<style>
+	/* Svelte 5 scopes styles per component, and CSS classes used
+	   in this file's markup — including inside `{#snippet footer}`
+	   — carry this component's hash. The local `.btn` / `.form` /
+	   `.quota-input` / `.muted` / `.status--error` / `.btn--primary`
+	   rules on `/admin/+page.svelte` don't reach across; mirror them
+	   here so the QuotaEditor visually matches every other modal in
+	   the admin panel (same paddings, colours, primary button look). */
+	.form {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.form label {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		font-size: 0.875rem;
+	}
+
+	.form input,
+	.form select {
+		padding: 0.5rem;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-input);
+		color: var(--color-text);
+	}
+
+	.quota-input {
+		display: flex;
+		gap: var(--space-2);
+	}
+
+	.quota-input input {
+		flex: 1;
+	}
+
+	.muted {
+		color: var(--color-text-muted);
+		font-size: 0.8125rem;
+	}
+
+	.status--error {
+		color: var(--color-error-text);
+	}
+
+	.btn {
+		padding: 0.5rem 0.875rem;
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-md);
+		background: var(--color-bg-surface);
+		color: var(--color-text);
+		cursor: pointer;
+	}
+
+	.btn--primary {
+		background: var(--color-primary);
+		color: var(--color-text-light);
+		border-color: transparent;
+	}
+
+	.btn:disabled {
+		opacity: 0.55;
+		cursor: not-allowed;
+	}
+</style>
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index b25932b8..db73fbd8 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -3669,11 +3669,11 @@
 	   splits mid-word either. */
 	.role-badges {
 		display: flex;
-		flex-direction: row;
-		flex-wrap: nowrap;
+		flex-flow: row nowrap;
 		align-items: center;
 		gap: var(--space-1, 0.25rem);
 	}
+
 	.role-badges .badge {
 		white-space: nowrap;
 	}
@@ -3686,6 +3686,7 @@
 	.auth-cell {
 		max-width: 12ch;
 	}
+
 	.auth-cell .badge__label {
 		display: inline-block;
 		max-width: 8ch;
@@ -4061,9 +4062,11 @@
 		color: var(--color-text-light);
 		border-color: transparent;
 	}
+
 	.btn--danger:hover:not(:disabled) {
 		filter: brightness(0.92);
 	}
+
 	.btn--danger:disabled {
 		opacity: 0.55;
 		cursor: not-allowed;
@@ -4221,6 +4224,7 @@
 		align-items: center;
 		gap: var(--space-1, 0.25rem);
 	}
+
 	.actions--drive {
 		display: grid;
 		/* Four action slots per row: manage-owners, policies, edit-
@@ -4232,12 +4236,14 @@
 		justify-content: end;
 		align-items: center;
 	}
+
 	.drive-kind-cell {
 		display: flex;
 		flex-direction: column;
 		align-items: flex-start;
 		gap: 0.15rem;
 	}
+
 	.drive-kind-cell__suffix {
 		font-size: 0.85em;
 	}