mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: prevent documents row from causing horizontal scroll on mobile

Browse source 
- Shorten button labels ("New document" → "New", "Upload attachment" → "Upload") on small screens
- Add min-w-0 and shrink-0 to flex containers and items to prevent overflow
- Truncate document revision text on narrow viewports
- Mark chevron, key badge, and action buttons as shrink-0

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-03-22 11:02:04 -05:00
parent 0b960b0739
commit e73bc81a73
2 changed files with 21 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
ui/src/components/IssueDocumentsSection.tsx
View file

@ -519,21 +519,23 @@ export function IssueDocumentsSection({
return ( return (
<div className="space-y-3"> <div className="space-y-3">
{isEmpty && !draft?.isNew ? ( {isEmpty && !draft?.isNew ? (
<div className="flex items-center justify-end gap-2"> <div className="flex items-center justify-end gap-2 min-w-0">
{extraActions} {extraActions}
<Button variant="outline" size="sm" onClick={beginNewDocument}> <Button variant="outline" size="sm" onClick={beginNewDocument} className="shrink-0">
<Plus className="mr-1.5 h-3.5 w-3.5" /> <Plus className="mr-1.5 h-3.5 w-3.5" />
New document <span className="hidden sm:inline">New document</span>
<span className="sm:hidden">New</span>
</Button> </Button>
</div> </div>
) : ( ) : (
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2 min-w-0">
<h3 className="text-sm font-medium text-muted-foreground">Documents</h3> <h3 className="text-sm font-medium text-muted-foreground shrink-0">Documents</h3>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 min-w-0">
{extraActions} {extraActions}
<Button variant="outline" size="sm" onClick={beginNewDocument}> <Button variant="outline" size="sm" onClick={beginNewDocument} className="shrink-0">
<Plus className="mr-1.5 h-3.5 w-3.5" /> <Plus className="mr-1.5 h-3.5 w-3.5" />
New document <span className="hidden sm:inline">New document</span>
<span className="sm:hidden">New</span>
</Button> </Button>
</div> </div>
</div> </div>
@ -634,29 +636,29 @@ export function IssueDocumentsSection({
> >
<div className="flex items-start justify-between gap-3"> <div className="flex items-start justify-between gap-3">
<div className="min-w-0"> <div className="min-w-0">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2 min-w-0">
<button <button
type="button" type="button"
className="inline-flex h-5 w-5 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground" className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground"
onClick={() => toggleFoldedDocument(doc.key)} onClick={() => toggleFoldedDocument(doc.key)}
aria-label={isFolded ? `Expand ${doc.key} document` : `Collapse ${doc.key} document`} aria-label={isFolded ? `Expand ${doc.key} document` : `Collapse ${doc.key} document`}
aria-expanded={!isFolded} aria-expanded={!isFolded}
> >
{isFolded ? <ChevronRight className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />} {isFolded ? <ChevronRight className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
</button> </button>
<span className="rounded-full border border-border px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.16em] text-muted-foreground"> <span className="shrink-0 rounded-full border border-border px-2 py-0.5 font-mono text-[10px] uppercase tracking-[0.16em] text-muted-foreground">
{doc.key} {doc.key}
</span> </span>
<a <a
href={`#document-${encodeURIComponent(doc.key)}`} href={`#document-${encodeURIComponent(doc.key)}`}
className="text-[11px] text-muted-foreground transition-colors hover:text-foreground hover:underline" className="truncate text-[11px] text-muted-foreground transition-colors hover:text-foreground hover:underline"
> >
rev {doc.latestRevisionNumber} • updated {relativeTime(doc.updatedAt)} rev {doc.latestRevisionNumber} • updated {relativeTime(doc.updatedAt)}
</a> </a>
</div> </div>
{showTitle && <p className="mt-2 text-sm font-medium">{doc.title}</p>} {showTitle && <p className="mt-2 text-sm font-medium">{doc.title}</p>}
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1 shrink-0">
<Button <Button
variant="ghost" variant="ghost"
size="icon-xs" size="icon-xs"

7
ui/src/pages/IssueDetail.tsx
View file

@ -672,7 +672,12 @@ export function IssueDetail() {
)} )}
> >
<Paperclip className="h-3.5 w-3.5 mr-1.5" /> <Paperclip className="h-3.5 w-3.5 mr-1.5" />
{uploadAttachment.isPending || importMarkdownDocument.isPending ? "Uploading..." : "Upload attachment"} {uploadAttachment.isPending || importMarkdownDocument.isPending ? "Uploading..." : (
<>
<span className="hidden sm:inline">Upload attachment</span>
<span className="sm:hidden">Upload</span>
</>
)}
</Button> </Button>
</> </>
); );