External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: prevent dropdown clipping in settings People and Teams tables

Browse Source 
Remove overflow-hidden from table wrappers that was clipping the
actions dropdown menu. Apply rounded corners directly to header and
last-row elements to preserve the visual appearance.

Closes #139
This commit is contained in:
SnapOtter
2026-05-16 22:45:51 +08:00
parent fd69a60e48
commit 2951161414
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/settings/settings-dialog.tsx
+8 -8
View File
@@ -1172,9 +1172,9 @@ function PeopleSection() {
)}
{/* Users table */}
<div className="border border-border rounded-lg overflow-hidden">
<div className="border border-border rounded-lg">
{/* Table header */}
<div className="grid grid-cols-[1fr_100px_120px_60px] gap-2 px-4 py-2.5 bg-muted/40 border-b border-border text-xs font-medium text-muted-foreground uppercase tracking-wide">
<div className="grid grid-cols-[1fr_100px_120px_60px] gap-2 px-4 py-2.5 bg-muted/40 rounded-t-lg border-b border-border text-xs font-medium text-muted-foreground uppercase tracking-wide">
<span>{t.settings.people.tableHeaderUser}</span>
<span>{t.settings.people.tableHeaderRole}</span>
<span>{t.settings.people.tableHeaderTeam}</span>
@@ -1183,14 +1183,14 @@ function PeopleSection() {
{/* Table rows */}
{filteredUsers.length === 0 ? (
<div className="px-4 py-8 text-center text-sm text-muted-foreground">
<div className="px-4 py-8 text-center text-sm text-muted-foreground rounded-b-lg">
{search ? t.settings.people.noSearchResults : t.settings.people.noUsersFound}
</div>
) : (
filteredUsers.map((u) => (
<div
key={u.id}
className="grid grid-cols-[1fr_100px_120px_60px] gap-2 items-center px-4 py-3 border-b border-border last:border-0 hover:bg-muted/20 transition-colors"
className="grid grid-cols-[1fr_100px_120px_60px] gap-2 items-center px-4 py-3 border-b border-border last:border-0 last:rounded-b-lg hover:bg-muted/20 transition-colors"
>
{/* User cell */}
<div className="flex items-center gap-3 min-w-0">
@@ -1705,22 +1705,22 @@ function TeamsSection() {
</form>
)}
<div className="border border-border rounded-lg overflow-hidden">
<div className="grid grid-cols-[1fr_100px_60px] gap-2 px-4 py-2.5 bg-muted/40 border-b border-border text-xs font-medium text-muted-foreground uppercase tracking-wide">
<div className="border border-border rounded-lg">
<div className="grid grid-cols-[1fr_100px_60px] gap-2 px-4 py-2.5 bg-muted/40 rounded-t-lg border-b border-border text-xs font-medium text-muted-foreground uppercase tracking-wide">
<span>{t.settings.teams.tableHeaderTeamName}</span>
<span>{t.settings.teams.totalMembers}</span>
<span />
</div>
{teams.length === 0 ? (
<div className="px-4 py-8 text-center text-sm text-muted-foreground">
<div className="px-4 py-8 text-center text-sm text-muted-foreground rounded-b-lg">
{t.settings.teams.emptyState}
</div>
) : (
teams.map((tm) => (
<div
key={tm.id}
className="grid grid-cols-[1fr_100px_60px] gap-2 items-center px-4 py-3 border-b border-border last:border-0 hover:bg-muted/20 transition-colors"
className="grid grid-cols-[1fr_100px_60px] gap-2 items-center px-4 py-3 border-b border-border last:border-0 last:rounded-b-lg hover:bg-muted/20 transition-colors"
>
<div className="min-w-0">
{editingTeamId === tm.id ? (