Improve layout markup

Author: kaishuu0123

src/renderer/src/App.tsx

@@ -124,7 +124,7 @@ function App(): JSX.Element {
     window.addEventListener('resize', updateWindowState)
 
     return () => {
-      window.removeEventListener("resize", updateWindowState)
+      window.removeEventListener('resize', updateWindowState)
     }
   }, [isSidebarOpen])
 
@@ -371,7 +371,7 @@ function App(): JSX.Element {
                     <div className="codicon codicon-note"></div>
                   </Button>
                 </DrawerTrigger>
-                <DrawerContent className="w-4/12 h-full rounded-none py-3">
+                <DrawerContent className="w-6/12 md:w-4/12 lg:max-2xl:w-3/12 h-full rounded-none py-3">
                   <div className="flex flex-col h-full space-y-4">
                     <div className="px-3">
                       <div className="flex items-center w-full">

src/renderer/src/components/note-card.tsx

@@ -163,33 +163,19 @@ function NoteCard({ note, onClick, onNoteCardSetName, onDeleteNote }): JSX.Eleme
         )}
       </div>
 
-      <div className="flex flex-col w-full">
-        <div className="grid grid-rows-1 grid-cols-3 space-x-1 justify-start text-muted-foreground text-xs">
-          <div className="text-nowrap truncate">
-            <div className="flex">
-              <div>{t('createdAt')}</div>
-              <div className="grow text-right">:</div>
-            </div>
-          </div>
-          <div
-            className="col-span-2 text-nowrap truncate font-mono"
-            title={formatToISO8601(note.createdAt)}
-          >
+      <div className="grid grid-cols-1 sm:grid-cols-[min-content_min-content_1fr] gap-x-0.5 text-muted-foreground text-xs">
+        <div className="grid grid-cols-subgrid col-span-full">
+          <div className="text-nowrap truncate">{t('createdAt')}</div>
+          <div className="hidden sm:block">:</div>
+          <div className="text-nowrap truncate font-mono" title={formatToISO8601(note.createdAt)}>
             {formatToRecent(note.createdAt)}
           </div>
         </div>
-        <div className="grid grid-rows-1 grid-cols-3 space-x-1 justify-start text-muted-foreground text-xs">
-          <div className="text-nowrap truncate">
-            <div className="flex">
-              <div>{t('updatedAt')}</div>
-              <div className="grow text-right">:</div>
-            </div>
-          </div>
-          <div
-            className="col-span-2 text-nowrap truncate font-mono"
-            title={formatToISO8601(note.updatedAt)}
-          >
-            {formatToRecent(note.updatedAt)}
+        <div className="grid grid-cols-subgrid col-span-full">
+          <div className="text-nowrap truncate">{t('updatedAt')}</div>
+          <div className="hidden sm:block">:</div>
+          <div className="text-nowrap truncate font-mono" title={formatToISO8601(note.createdAt)}>
+            {formatToRecent(note.createdAt)}
           </div>
         </div>
       </div>

src/renderer/src/lib/formatDateTime.ts

@@ -1,4 +1,4 @@
-import { format, formatISO, isSameDay, isSameYear } from 'date-fns'
+import { format, formatISO, isSameDay } from 'date-fns'
 
 export const formatToISO8601 = (dateTimeMilliSeconds: number | undefined) => {
   if (dateTimeMilliSeconds == null) {