fix: polish mobile publication layouts (#106)

* fix: polish mobile publication layouts

* fix(mobile): dialog-mobile now truly fullscreen height (100dvh, no insets)

* fix(mobile): remove rounded corners and add max-w-[100vw] on all dialog-mobile dialogs

Remove rounded-2xl from mobile fullscreen dialogs to ensure sharp edges, add max-w-[100vw] for true full-width on wider phones, and shift rounded corners to sm: breakpoint for desktop.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix(mobile): keyboard shortcuts overlay now fullscreen and scrollable on mobile

* fix(mobile): vault detail header non-sticky on mobile, prevents overlap with publication list header

* fix(mobile): reduce ASCII art font size to prevent clipping on narrow screens

* fix(mobile): toolbar controls now wrap horizontally instead of stacking vertically

* fix(mobile): consistent dialog headings — // prefix, uniform font size, left-aligned on all viewports

* fix: add // prefix to account_settings page heading

---------

Co-authored-by: C-3PO <c3po.bot@gmail.com>
Co-authored-by: velitchko <velitchkofilipov@gmail.com>
Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 4 people

src/components/layout/BugReportButton.tsx

@@ -21,7 +21,7 @@ export function BugReportButton() {
   };
 
   return (
-    <div className="pointer-events-none fixed bottom-4 right-4 z-40 sm:bottom-6 sm:right-6">
+    <div className="pointer-events-none fixed bottom-[calc(1rem+env(safe-area-inset-bottom))] right-4 z-40 sm:bottom-6 sm:right-6">
       <div className="flex flex-col items-end gap-2 pointer-events-auto">
         <Badge
           variant="outline"

src/components/layout/ScrollToTopButton.tsx

@@ -27,7 +27,7 @@ export function ScrollToTopButton() {
   };
 
   return (
-    <div className="pointer-events-none fixed bottom-[calc(1rem+4.75rem)] right-4 z-40 sm:bottom-[calc(1.5rem+4.75rem)] sm:right-6">
+    <div className="pointer-events-none fixed bottom-[calc(1rem+4.75rem+env(safe-area-inset-bottom))] right-4 z-40 sm:bottom-[calc(1.5rem+4.75rem)] sm:right-6">
       <Button
         onClick={handleScrollToTop}
         size="icon"

src/components/profile/ProfileDialog.tsx

@@ -282,9 +282,9 @@ export function ProfileDialog({ open, onOpenChange }: ProfileDialogProps) {
         description="You have unsaved changes to your profile. Would you like to save them before closing?"
       />
       <Dialog open={open} onOpenChange={handleDialogClose}>
-        <DialogContent className="dialog-mobile rounded-2xl sm:h-auto sm:w-[95vw] sm:max-w-3xl sm:max-h-[90vh] border-2 bg-card/95 backdrop-blur-xl overflow-hidden flex flex-col gap-0 p-0">
+        <DialogContent className="dialog-mobile max-w-[100vw] sm:rounded-2xl sm:h-auto sm:w-[95vw] sm:max-w-3xl sm:max-h-[90vh] border-2 bg-card/95 backdrop-blur-xl overflow-hidden flex flex-col gap-0 p-0">
         <DialogHeader className="px-6 pt-6 pb-4">
-          <DialogTitle className="text-2xl font-bold font-mono">edit_profile</DialogTitle>
+          <DialogTitle className="text-xl sm:text-2xl font-bold font-mono">// edit_profile</DialogTitle>
         </DialogHeader>
 
         <Form {...form}>

src/components/publications/AddImportDialog.tsx

@@ -308,7 +308,7 @@ export function AddImportDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent forceMount className="dialog-mobile rounded-2xl p-0 border-2 bg-card/95 backdrop-blur-xl overflow-hidden flex flex-col gap-0 min-h-0 sm:h-auto sm:w-[95vw] sm:max-w-4xl sm:max-h-[90vh] data-[state=closed]:hidden">
+      <DialogContent forceMount className="dialog-mobile max-w-[100vw] p-0 border-2 bg-card/95 backdrop-blur-xl overflow-hidden flex flex-col gap-0 min-h-0 sm:rounded-2xl sm:h-auto sm:w-[95vw] sm:max-w-4xl sm:max-h-[90vh] data-[state=closed]:hidden">
         <DialogHeader className="p-4 sm:p-6 pb-0">
           <DialogTitle className="text-xl sm:text-2xl font-bold font-mono">
             // add_<span className="text-gradient">papers</span>
@@ -422,7 +422,7 @@ export function AddImportDialog({
                     placeholder="Author 1, Author 2, ..." className="font-mono text-sm" />
                 </div>
                 {/* Year + Type */}
-                <div className="grid grid-cols-2 gap-4">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div className="space-y-2">
                     <Label className="font-semibold font-mono">year</Label>
                     <Input type="number" value={manualForm.year ?? ''} onChange={(e) => setManualForm(f => ({ ...f, year: e.target.value ? parseInt(e.target.value) : null }))}
@@ -445,7 +445,7 @@ export function AddImportDialog({
                     placeholder="Journal name" className="font-mono text-sm" />
                 </div>
                 {/* Volume / Issue / Pages */}
-                <div className="grid grid-cols-3 gap-4">
+                <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                   <div className="space-y-2">
                     <Label className="font-semibold font-mono">volume</Label>
                     <Input value={manualForm.volume || ''} onChange={(e) => setManualForm(f => ({ ...f, volume: e.target.value }))}
@@ -463,7 +463,7 @@ export function AddImportDialog({
                   </div>
                 </div>
                 {/* DOI + URL */}
-                <div className="grid grid-cols-2 gap-4">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div className="space-y-2">
                     <Label className="font-semibold font-mono">doi</Label>
                     <Input value={manualForm.doi || ''} onChange={(e) => setManualForm(f => ({ ...f, doi: e.target.value }))}
@@ -614,7 +614,7 @@ export function AddImportDialog({
 
                 {/* ISSN + EID (articles) */}
                 {manualForm.publication_type === 'article' && (
-                  <div className="grid grid-cols-2 gap-4">
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                     <div className="space-y-2">
                       <Label className="font-semibold font-mono">issn</Label>
                       <Input value={manualForm.issn || ''} onChange={(e) => setManualForm(f => ({ ...f, issn: e.target.value }))}

src/components/publications/ExportDialog.tsx

@@ -160,11 +160,10 @@ export function ExportDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="dialog-mobile rounded-2xl sm:h-auto sm:w-[95vw] sm:max-w-lg sm:max-h-[90vh] flex flex-col overflow-hidden border-2 bg-card/95 backdrop-blur-xl p-0">
+      <DialogContent className="dialog-mobile max-w-[100vw] sm:rounded-2xl sm:h-auto sm:w-[95vw] sm:max-w-lg sm:max-h-[90vh] flex flex-col overflow-hidden border-2 bg-card/95 backdrop-blur-xl p-0">
         <DialogHeader className="px-4 sm:px-6 pt-4 sm:pt-6 pb-4">
-          <DialogTitle className="flex items-center gap-2 font-mono text-lg sm:text-xl">
-            <FileText className="w-5 h-5 text-primary" />
-            export_references
+          <DialogTitle className="flex items-center gap-2 font-mono text-xl sm:text-2xl font-bold">
+            // export_references
             <KbdHint shortcut="Ctrl+E" className="ml-auto" size="sm" />
           </DialogTitle>
         </DialogHeader>

src/components/publications/PublicationCard.tsx

@@ -110,8 +110,8 @@ export function PublicationCard({
       )}
       onClick={onOpen}
     >
-      <CardContent className="p-5">
-        <div className="flex items-start gap-4">
+      <CardContent className="p-3 sm:p-5">
+        <div className="flex items-start gap-3 sm:gap-4">
           <div 
             className="pt-1"
             onClick={(e) => {
@@ -126,13 +126,13 @@ export function PublicationCard({
           </div>
 
           <div className="flex-1 min-w-0">
-            <div className="flex items-start justify-between gap-3">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
               <div className="flex-1 min-w-0">
-                <h3 className="font-bold text-lg text-foreground leading-tight line-clamp-2 group-hover:text-primary transition-colors">
+                <h3 className="font-bold text-base sm:text-lg text-foreground leading-tight line-clamp-3 sm:line-clamp-2 group-hover:text-primary transition-colors">
                   {publication.title}
                 </h3>
                 {(show.authors || show.year || show.type) && (
-                  <p className="text-sm text-muted-foreground mt-1.5 font-mono">
+                  <p className="text-xs sm:text-sm text-muted-foreground mt-1.5 font-mono">
                     {show.authors && formatAuthors(publication.authors)}
                     {show.year && publication.year && (
                       <span className="text-neon-green">{show.authors ? ' • ' : ''}{publication.year}</span>
@@ -155,7 +155,7 @@ export function PublicationCard({
                 )}
               </div>
 
-              <div className="flex items-center gap-1 shrink-0">
+              <div className="flex flex-wrap items-center gap-1 shrink-0 sm:justify-end">
                 {show.pdf && publication.pdf_url && (
                   <a
                     href={publication.pdf_url}
@@ -195,7 +195,7 @@ export function PublicationCard({
                     <Button 
                       variant="ghost" 
                       size="icon" 
-                      className="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity h-9 w-9"
+                      className="shrink-0 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity h-9 w-9"
                     >
                       <MoreVertical className="w-4 h-4" />
                     </Button>

src/components/publications/PublicationDialog.tsx

@@ -827,11 +827,11 @@ export function PublicationDialog({
           className="w-screen max-w-none box-border h-screen sm:w-[95vw] sm:max-w-3xl sm:h-auto sm:max-h-[90vh] m-0 p-0 border-0 sm:border-2 bg-card/95 backdrop-blur-xl overflow-x-hidden overflow-y-auto flex flex-col"
         >
         <DialogHeader className="px-2 py-3 sm:p-6 pb-2 sm:pb-0">
-          <DialogTitle className="text-lg sm:text-2xl font-bold font-mono pr-8 sm:pr-10">
+          <DialogTitle className="text-xl sm:text-2xl font-bold font-mono pr-8 sm:pr-10">
             {publication ? (
-              <span>edit_<span className="text-gradient">paper</span></span>
+              <span>// edit_<span className="text-gradient">paper</span></span>
             ) : (
-              <span>add_<span className="text-gradient">paper</span></span>
+              <span>// add_<span className="text-gradient">paper</span></span>
             )}
           </DialogTitle>
           {publication && onCheckSync && (

src/components/publications/PublicationList.tsx

@@ -400,8 +400,8 @@ export function PublicationList({
   return (
     <div className="flex-1 flex flex-col min-h-0 overflow-x-hidden">
       {/* Header */}
-      <header className="bg-card/50 backdrop-blur-xl border-b-2 border-border px-4 lg:px-8 py-4 shrink-0 sticky top-0 z-10">
-        <div className="flex items-center gap-3">
+      <header className="bg-card/50 backdrop-blur-xl border-b-2 border-border px-3 sm:px-4 lg:px-8 py-3 sm:py-4 shrink-0 sticky top-0 z-10">
+        <div className="flex items-center gap-2 sm:gap-3">
           <MobileMenuButton 
             onClick={onMobileMenuOpen}
             className="shrink-0"
@@ -440,7 +440,7 @@ export function PublicationList({
             </p>
           </div>
 
-          <div className="flex items-center gap-2 shrink-0">
+          <div className="flex items-center gap-1 sm:gap-2 shrink-0">
             <NotificationDropdown />
 
             {/* Visible buttons on larger screens */}
@@ -531,7 +531,7 @@ export function PublicationList({
             )}
 
             {onAddPublication && (
-              <Button onClick={onAddPublication} variant="glow" className="h-9 font-mono">
+              <Button onClick={onAddPublication} variant="glow" className="h-9 w-9 sm:w-auto sm:px-3 font-mono">
                 <Plus className="w-4 h-4 sm:mr-2" />
                 <span className="hidden sm:inline">add_paper</span>
               </Button>
@@ -540,9 +540,9 @@ export function PublicationList({
         </div>
 
         {/* Search, filters and view settings */}
-        <div className="flex items-center gap-3 mt-5 flex-wrap">
+        <div className="mt-4 sm:mt-5 flex flex-row flex-wrap gap-2 sm:gap-3 items-center">
           {/* Search input — left side, grows to fill available space */}
-          <div className="relative flex-1 min-w-[160px]">
+          <div className="relative w-full sm:flex-1 sm:min-w-[220px]">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
             <Input
               ref={searchInputRef}
@@ -692,7 +692,7 @@ export function PublicationList({
       {/* Publication list */}
       <div
         ref={listContainerRef}
-        className="flex-1 overflow-y-auto scrollbar-thin overflow-x-hidden p-4 lg:p-8 outline-none"
+        className="flex-1 overflow-y-auto scrollbar-thin overflow-x-hidden p-3 sm:p-4 lg:p-8 pb-[calc(1rem+env(safe-area-inset-bottom))] outline-none"
         {...kbNav.containerProps}
       >
         {filteredPublications.length === 0 ? (
@@ -743,7 +743,7 @@ export function PublicationList({
             onCheckSync={onCheckPublicationSync}
           />
         ) : (
-          <div className="space-y-4 max-w-4xl mx-auto">
+          <div className="space-y-3 sm:space-y-4 max-w-4xl mx-auto">
             {filteredPublications.map((pub, index) => (
               <div
                 key={pub.id}

src/components/publications/PublicationSyncDialog.tsx

@@ -56,9 +56,8 @@ export function PublicationSyncDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-2xl bg-card border-2 backdrop-blur-xl">
         <DialogHeader>
-          <DialogTitle className="font-mono flex items-center gap-2 text-base">
-            <RefreshCw className="w-4 h-4" />
-            semantic_scholar_sync()
+          <DialogTitle className="font-mono text-xl sm:text-2xl font-bold">
+            // semantic_scholar_sync()
           </DialogTitle>
           <DialogDescription className="font-mono text-xs">
             Review incoming metadata. Notes and tags are not affected.

src/components/publications/PublicationViewDialog.tsx

@@ -67,8 +67,8 @@ export function PublicationViewDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="publication-view-dialog w-[min(calc(100vw-2rem),48rem)] max-w-[calc(100vw-2rem)] rounded-2xl border-2 bg-card/95 backdrop-blur-xl max-h-[min(90vh,56rem)] overflow-y-auto shadow-2xl sm:max-w-3xl">
-        <DialogHeader className="space-y-3">
+      <DialogContent className="dialog-mobile publication-view-dialog max-w-[100vw] border-2 bg-card/95 backdrop-blur-xl overflow-hidden shadow-2xl sm:rounded-2xl sm:h-auto sm:w-[95vw] sm:max-w-3xl sm:max-h-[90vh] p-0 gap-0">
+        <DialogHeader className="shrink-0 space-y-3 px-4 sm:px-6 pt-4 sm:pt-6 pb-4 border-b border-border/60">
           <div className="flex flex-wrap items-center gap-2">
             {publication.publication_type && (
               <Badge variant="outline" className="font-mono text-xs">
@@ -81,20 +81,20 @@ export function PublicationViewDialog({
               </Badge>
             )}
           </div>
-          <DialogTitle className="text-xl sm:text-2xl font-bold leading-tight">
-            {publication.title}
+          <DialogTitle className="pr-8 text-xl sm:text-2xl font-bold font-mono leading-tight">
+            // {publication.title}
           </DialogTitle>
           <DialogDescription className="text-sm font-mono">
             {publication.authors.length > 0 ? publication.authors.join(', ') : 'unknown author'}
             {publication.updated_at && ` • updated ${formatTimeAgo(publication.updated_at)}`}
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-6">
+        <div className="flex-1 min-h-0 overflow-y-auto space-y-5 sm:space-y-6 px-4 sm:px-6 py-4 sm:py-6">
           {(publication.doi || publication.url || publication.pdf_url || driveLoading || driveUrl) && (
-            <div className="flex flex-wrap gap-2">
+            <div className="grid grid-cols-1 sm:flex sm:flex-wrap gap-2">
               {publication.doi && (
-                <Button asChild variant="outline" size="sm" className="font-mono">
+                <Button asChild variant="outline" size="sm" className="w-full justify-start sm:w-auto font-mono">
                   <a
                     href={`https://doi.org/${encodeURIComponent(publication.doi)}`}
                     target="_blank"
@@ -106,29 +106,29 @@ export function PublicationViewDialog({
                 </Button>
               )}
               {publication.url && (
-                <Button asChild variant="outline" size="sm" className="font-mono">
+                <Button asChild variant="outline" size="sm" className="w-full justify-start sm:w-auto font-mono">
                   <a href={publication.url} target="_blank" rel="noopener noreferrer">
                     <ExternalLink className="w-4 h-4 mr-2" />
                     link
                   </a>
                 </Button>
               )}
               {publication.pdf_url && (
-                <Button asChild variant="outline" size="sm" className="font-mono">
+                <Button asChild variant="outline" size="sm" className="w-full justify-start sm:w-auto font-mono">
                   <a href={publication.pdf_url} target="_blank" rel="noopener noreferrer">
                     <FileText className="w-4 h-4 mr-2" />
                     publisher_pdf
                   </a>
                 </Button>
               )}
               {driveLoading && (
-                <Button variant="outline" size="sm" className="font-mono" disabled>
+                <Button variant="outline" size="sm" className="w-full justify-start sm:w-auto font-mono" disabled>
                   <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                   drive_pdf
                 </Button>
               )}
               {!driveLoading && driveUrl && (
-                <Button asChild variant="outline" size="sm" className="font-mono">
+                <Button asChild variant="outline" size="sm" className="w-full justify-start sm:w-auto font-mono">
                   <a href={driveUrl} target="_blank" rel="noopener noreferrer">
                     <GoogleDriveIcon className="w-4 h-4 mr-2" />
                     drive_pdf
@@ -201,8 +201,8 @@ export function PublicationViewDialog({
         </div>
 
         {onEdit && (
-          <DialogFooter>
-            <Button type="button" className="font-mono" onClick={() => onEdit(publication)}>
+          <DialogFooter className="shrink-0 border-t border-border/60 px-4 sm:px-6 py-4 flex-col-reverse sm:flex-row gap-2">
+            <Button type="button" className="w-full sm:w-auto font-mono" onClick={() => onEdit(publication)}>
               <Pencil className="w-4 h-4 mr-2" />
               edit
             </Button>