misc styling

src/@/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer h-3 w-3 sm:h-6 sm:w-6 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className
     )}
     {...props}

src/app/layout.tsx

@@ -33,8 +33,9 @@ export default function RootLayout({
         >
           <div id="layout-container" className="md:p-4 w-screen h-screen mt-2 md:mt-6 flex justify-center">
             <div className="w-full md:w-5/6 flex flex-col md:flex-row">
-              <div id="sidebar" className=" flex flex-row md:flex-col  justify-between"> <header className="">
+              <div id="sidebar" className=" flex flex-row md:flex-col  justify-between items-center"> <header className="">
-                <h1 className="font-black text-4xl text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6 pr-4 hidden md:block">SubMan</h1>
+                <h1 className="font-black text-primary-foreground bg-primary antialiased w-full p-2 rounded-tl-3xl pl-6 pr-4 text-sm sm:text-4xl
+                ">SubMan</h1>
                 <p className="mt-2 mx-1 text-sm antialiased w-40 hidden md:block">The self-hosted literary submission tracker.</p>
               </header>
                 <Navlinks className="md:mt-6" />

src/app/publication/page.tsx

@@ -12,7 +12,7 @@ export default async function Page() {
   const genres = await getGenres()
   const pubs = await getPubsWithGenres()
   return (
-    <div className="container px-1 md:px-4 mx-auto">
+    <div className="container px-0 md:px-4 mx-auto">
       <DataTable data={pubs} columns={columns} tableName="pub" genres={genres}>
         <CreatePubDialog genres={genres} />
       </DataTable>

src/app/story/columns.tsx

@@ -31,7 +31,7 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
     },
     cell: cell => (
       <>
-        <p className="block break-words max-w-36 md:hidden text-xs">{cell.getValue()}</p>
+        <p className="block break-words max-w-28 md:hidden text-xs">{cell.getValue()}</p>
         <TextInputCell cellContext={cell} className="hidden md:block" />
       </>
     ),

src/app/tailwind.css

@@ -706,10 +706,6 @@ body {
   z-index: 100;
 }
 
-.float-right {
-  float: right;
-}
-
 .m-auto {
   margin: auto;
 }
@@ -968,10 +964,6 @@ body {
   width: 100vw;
 }
 
-.w-1\/2 {
-  width: 50%;
-}
-
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -997,6 +989,10 @@ body {
   max-width: 9rem;
 }
 
+.max-w-60 {
+  max-width: 15rem;
+}
+
 .max-w-full {
   max-width: 100%;
 }
@@ -1013,16 +1009,12 @@ body {
   max-width: 20rem;
 }
 
-.max-w-40 {
+.max-w-32 {
-  max-width: 10rem;
+  max-width: 8rem;
 }
 
-.max-w-\[50\%\] {
+.max-w-28 {
-  max-width: 50%;
+  max-width: 7rem;
-}
-
-.max-w-60 {
-  max-width: 15rem;
 }
 
 .shrink-0 {
@@ -1109,18 +1101,6 @@ body {
   flex-wrap: wrap;
 }
 
-.content-center {
-  align-content: center;
-}
-
-.content-start {
-  align-content: flex-start;
-}
-
-.content-between {
-  align-content: space-between;
-}
-
 .items-start {
   align-items: flex-start;
 }
@@ -1240,10 +1220,6 @@ body {
   margin-bottom: calc(2rem * var(--tw-space-y-reverse));
 }
 
-.self-end {
-  align-self: flex-end;
-}
-
 .justify-self-end {
   justify-self: end;
 }
@@ -1476,6 +1452,11 @@ body {
   padding-bottom: 1rem;
 }
 
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -1512,10 +1493,6 @@ body {
   text-align: center;
 }
 
-.align-top {
-  vertical-align: top;
-}
-
 .align-middle {
   vertical-align: middle;
 }
@@ -1559,11 +1536,6 @@ body {
   line-height: 1rem;
 }
 
-.text-6xl {
-  font-size: 3.75rem;
-  line-height: 1;
-}
-
 .font-black {
   font-weight: 900;
 }
@@ -2397,6 +2369,22 @@ body {
     display: none;
   }
 
+  .sm\:h-4 {
+    height: 1rem;
+  }
+
+  .sm\:h-6 {
+    height: 1.5rem;
+  }
+
+  .sm\:w-4 {
+    width: 1rem;
+  }
+
+  .sm\:w-6 {
+    width: 1.5rem;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -2435,6 +2423,11 @@ body {
     text-align: left;
   }
 
+  .sm\:text-4xl {
+    font-size: 2.25rem;
+    line-height: 2.5rem;
+  }
+
   .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open] {
     --tw-enter-translate-y: 100%;
   }

src/app/ui/tables/data-table.tsx

@@ -245,8 +245,8 @@ export function DataTable<TData, TValue>({
                 if (!res) toast({ title: "Oh dear...", description: "Failed to delete." })
                 if (res) toast({ title: "Successfully deleted records of id:", description: JSON.stringify(recordIds) })
                 table.resetRowSelection()
-                router.refresh()
                 setIsDeleteDialogVisible(false)
+                router.refresh()
               }}>
               Yes, delete them!</Button>
           </DialogFooter>
@@ -284,7 +284,7 @@ export function DataTable<TData, TValue>({
         </DropdownMenuContent>
       </DropdownMenu>
     </div>
-    <div className="rounded-md border">
+    <div className="rounded-md">
 
 
       <Table>

src/app/ui/tables/inputs/genrePickerInput.tsx

@@ -77,9 +77,9 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
             control={form.control}
             name="genres"
             render={({ field }) => (
-              <FormItem className="w-full max-w-xs flex flex-col">
+              <FormItem className="w-full max-w-32 flex flex-col">
                 <PopoverTrigger asChild>
-                  {value.length > 0 ? <Button variant="ghost" className="h-fit p-1"><GenreBadges genres={value} className="w-full" /></Button> : <Button variant="outline" type="button" className="text-xs md:text-sm w-fit m-auto">Add genres</Button>
+                  {value.length > 0 ? <Button variant="ghost" className="h-fit p-0"><GenreBadges genres={value} className="w-full" /></Button> : <Button variant="outline" type="button" className="text-xs md:text-sm w-fit m-auto">Add genres</Button>
                   }
                 </PopoverTrigger>