itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-22 14:35:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(settings): server row actions wrap inside the card at narrow widths (#751)

Browse Source 
The action cluster (Test Connection / Use / Delete) had `flex-shrink: 0`
and the parent flex row had no `flex-wrap`, so on narrower Settings
panes the buttons spilled past the card's right edge instead of
flowing under the server info. Enable `flex-wrap: wrap` on the parent
and pin the actions with `margin-left: auto` so they stay right-aligned
when they wrap to a new line.
This commit is contained in:
Frank Stellmacher
2026-05-17 14:15:48 +02:00
committed by GitHub
parent 5856bdbf1a
commit 04149c048e
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/settings/ServersTab.tsx
+2 -2
View File
@@ -213,7 +213,7 @@ export function ServersTab({
> >
<div style={{ display: 'flex', alignItems: 'stretch', gap: '0.75rem' }}> <div style={{ display: 'flex', alignItems: 'stretch', gap: '0.75rem' }}>
<ServerGripHandle idx={srvIdx} label={serverListDisplayLabel(srv, auth.servers)} /> <ServerGripHandle idx={srvIdx} label={serverListDisplayLabel(srv, auth.servers)} />
<div style={{ flex: 1, display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: '1rem' }}> <div style={{ flex: 1, display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: '1rem', flexWrap: 'wrap' }}>
<div style={{ minWidth: 0 }}> <div style={{ minWidth: 0 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '2px' }}> <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '2px' }}>
<span style={{ fontWeight: 600 }}>{serverListDisplayLabel(srv, auth.servers)}</span> <span style={{ fontWeight: 600 }}>{serverListDisplayLabel(srv, auth.servers)}</span>
@@ -236,7 +236,7 @@ export function ServersTab({
{srv.username} {srv.username}
</div> </div>
</div> </div>
<div style={{ display: 'flex', gap: '6px', flexShrink: 0, alignItems: 'center' }}> <div style={{ display: 'flex', gap: '6px', flexShrink: 0, alignItems: 'center', marginLeft: 'auto' }}>
{status === 'ok' && <CheckCircle2 size={16} style={{ color: 'var(--positive)' }} />} {status === 'ok' && <CheckCircle2 size={16} style={{ color: 'var(--positive)' }} />}
{status === 'error' && <WifiOff size={16} style={{ color: 'var(--danger)' }} />} {status === 'error' && <WifiOff size={16} style={{ color: 'var(--danger)' }} />}
{status === 'testing' && <div className="spinner" style={{ width: 16, height: 16 }} />} {status === 'testing' && <div className="spinner" style={{ width: 16, height: 16 }} />}