Fix reader card action buttons overflowing into adjacent card

This commit is contained in:
copilot-swe-agent[bot] 2026-07-02 14:54:45 +00:00 committed by GitHub
parent edd5dcab70
commit ae74cbf136
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 43 additions and 0 deletions

View file

@ -222,6 +222,7 @@ button.danger {
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px;
min-width: 0;
}
.reader-card .reader-name {
@ -252,10 +253,17 @@ button.danger {
.reader-card .actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.reader-card .actions button {
flex: 1 1 calc(50% - 8px);
padding: 10px 8px;
white-space: nowrap;
}
.badge {
display: inline-block;
padding: 2px 8px;

35
public/preview.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html><head><link rel="stylesheet" href="http://localhost:8931/css/style.css">
<style>body{background:#0b0d11;padding:20px;color:#fff}</style>
</head>
<body>
<h3 style="color:#eee">Readers</h3>
<div class="readers-grid" style="max-width:700px">
<div class="reader-card">
<div class="reader-name">Test A</div>
<div class="reader-id">1111</div>
<div class="field"><span>Enabled</span><input type="checkbox" checked></div>
<div class="field"><span>Armed</span><input type="checkbox"></div>
<div class="field"><span>Unlock time (s)</span><input type="number" value="8"></div>
<div class="actions">
<button class="secondary">Save</button>
<button class="secondary">Manage access</button>
<button class="secondary">View logs</button>
<button class="danger">Delete</button>
</div>
</div>
<div class="reader-card">
<div class="reader-name">Test B</div>
<div class="reader-id">2222</div>
<div class="field"><span>Enabled</span><input type="checkbox" checked></div>
<div class="field"><span>Armed</span><input type="checkbox"></div>
<div class="field"><span>Unlock time (s)</span><input type="number" value="8"></div>
<div class="actions">
<button class="secondary">Save</button>
<button class="secondary">Manage access</button>
<button class="secondary">View logs</button>
<button class="danger">Delete</button>
</div>
</div>
</div>
</body></html>