mirror/crumbs-original
1
0
Fork 1
mirror of https://github.com/bretzel-app/crumbs.git synced 2026-10-12 20:06:57 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: prevent settings page elements from overflowing on mobile

Browse Source 
Stack MCP key form, API key items, user list rows, and delete
account confirmation vertically on small screens using
flex-col/sm:flex-row. Add truncate on user names/emails.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Frederic Cabassut
2026-03-09 21:56:42 +01:00
co-authored by Claude Opus 4.6
parent 8e630d9bb7
commit 448c2127d5
3 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(app)/settings/+page.svelte
+2 -2
View File
@@ -328,7 +328,7 @@
<div class="mb-3 text-sm text-[var(--error-text)]">{deleteMsg}</div>
{/if}
<div class="flex items-center gap-3">
<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
<input
type="password"
bind:value={deletePassword}
@@ -337,7 +337,7 @@
/>
<button
onclick={deleteAccount}
class="rounded-sm bg-[var(--destructive)] px-4 py-2 text-sm font-medium text-white hover:opacity-90"
class="whitespace-nowrap rounded-sm bg-[var(--destructive)] px-4 py-2 text-sm font-medium text-white hover:opacity-90"
>
Confirm delete
</button>
src/routes/(app)/settings/mcp/+page.svelte
+3 -3
View File
@@ -126,7 +126,7 @@ ${mcpJsonConfig}`);
</p>
<!-- Create Key Form -->
<form onsubmit={createKey} class="mb-6 flex gap-2">
<form onsubmit={createKey} class="mb-6 flex flex-col gap-2 sm:flex-row">
<input
type="text"
bind:value={newKeyName}
@@ -182,7 +182,7 @@ ${mcpJsonConfig}`);
{:else}
<div class="space-y-2" data-testid="api-keys-list">
{#each keys as key (key.id)}
<div class="flex items-center justify-between rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] px-4 py-3" data-testid="api-key-item">
<div class="flex flex-col gap-2 rounded-sm border border-[var(--border-subtle)] bg-[var(--bg-base)] px-4 py-3 sm:flex-row sm:items-center sm:justify-between" data-testid="api-key-item">
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2">
<span class="text-sm font-medium text-[var(--text)]" data-testid="api-key-name">{key.name}</span>
@@ -195,7 +195,7 @@ ${mcpJsonConfig}`);
{/if}
</div>
</div>
<div class="ml-4">
<div class="sm:ml-4">
{#if deleteConfirmId === key.id}
<div class="flex items-center gap-1">
<button
src/routes/(app)/settings/users/+page.svelte
+5 -5
View File
@@ -167,17 +167,17 @@
<div class="space-y-3">
{#each users as user (user.id)}
<div class="flex items-center justify-between rounded-sm border border-[var(--border-subtle)] p-4">
<div>
<p class="font-medium text-[var(--text)]">
<div class="flex flex-col gap-2 rounded-sm border border-[var(--border-subtle)] p-4 sm:flex-row sm:items-center sm:justify-between">
<div class="min-w-0">
<p class="truncate font-medium text-[var(--text)]">
{user.displayName || user.email}
{#if user.role === 'admin'}
<span class="ml-2 rounded-sm bg-[var(--primary)]/15 px-2 py-0.5 text-xs text-[var(--primary)]">admin</span>
{/if}
</p>
<p class="text-sm text-[var(--text-muted)]">{user.email}</p>
<p class="truncate text-sm text-[var(--text-muted)]">{user.email}</p>
</div>
<div class="flex items-center gap-2">
<div class="flex flex-wrap items-center gap-2">
<button
onclick={() => toggleRole(user)}
class="rounded-sm px-3 py-1 text-xs text-[var(--text-muted)] hover:bg-[var(--border-subtle)]/50"