admin/accounted
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(settings): keep the Peppol access request inside the settings column (#1796)

Browse Source 
The request checkbox and button sat in a shrink-0 end slot next to the
status text, so at the settings column's width the row grew wider than
the panel and pushed every other row's label out of view. The controls
now sit under the status text in a wrapping line.


Claude-Session: https://claude.ai/code/session_01TqFpxeWqbpR7bcwUJLRERQ

Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Jakob Wennberg
2026-08-21 18:12:31 +02:00
committed by GitHub
co-authored by Jakob Wennberg Claude Fable 5
parent 3af95bec3f
commit a5c8f55127
1 changed files with 30 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/settings/PeppolReceiveSettings.tsx
+30 -26
View File
@@ -152,7 +152,7 @@ export function PeppolReceiveSettings() {
return (
<SettingsGroup label={t('heading')}>
<SettingsRow label={t('access_label')} align="baseline">
<div className="min-w-0 flex-1 space-y-1 text-sm">
<div className="min-w-0 flex-1 space-y-2 text-sm">
{loadFailed ? (
<SettingsRowNote>{t('load_failed')}</SettingsRowNote>
) : state === null ? (
@@ -160,34 +160,38 @@ export function PeppolReceiveSettings() {
) : !transportAvailable ? (
<SettingsRowNote>{t('provider_required')}</SettingsRowNote>
) : (
<>
<span>{accessLine}</span>
<div className="space-y-1">
<span className="block">{accessLine}</span>
{sendsLine && <SettingsRowNote className="block tabular-nums">{sendsLine}</SettingsRowNote>}
</>
</div>
)}
{/* The request controls live under the status text and wrap: a long
checkbox label next to a button in a shrink-0 end slot pushed the
whole settings panel wider than its column. */}
{state !== null && transportAvailable && (access?.status === 'none' || access?.status === 'disabled') && (
<div className="flex flex-wrap items-center gap-x-4 gap-y-2">
<label className="flex min-w-0 items-center gap-2 text-xs text-muted-foreground">
<input
type="checkbox"
className="h-4 w-4 shrink-0 rounded-sm border-border"
checked={wantsReceiving}
onChange={(event) => setWantsReceiving(event.target.checked)}
disabled={isRequesting || !canWrite}
/>
<span>{t('request_receiving_label')}</span>
</label>
<Button
type="button"
variant="outline"
className="ml-auto"
onClick={() => void requestAccess()}
disabled={isRequesting || !canWrite}
>
{isRequesting ? t('request_sending') : t('request_button')}
</Button>
</div>
)}
</div>
{state !== null && transportAvailable && (access?.status === 'none' || access?.status === 'disabled') && (
<SettingsRowEnd className="flex-col items-end gap-2 md:flex-row md:items-center">
<label className="flex items-center gap-2 text-xs text-muted-foreground">
<input
type="checkbox"
className="h-4 w-4 rounded-sm border-border"
checked={wantsReceiving}
onChange={(event) => setWantsReceiving(event.target.checked)}
disabled={isRequesting || !canWrite}
/>
{t('request_receiving_label')}
</label>
<Button
type="button"
variant="outline"
onClick={() => void requestAccess()}
disabled={isRequesting || !canWrite}
>
{isRequesting ? t('request_sending') : t('request_button')}
</Button>
</SettingsRowEnd>
)}
</SettingsRow>
{/* Receiving is a separate grant (one contracted slot each): the switch