Adjust drawer design

renderer/app.css

@@ -7,3 +7,27 @@
   width: 1.2rem;
   height: 1.2rem;
 }
+
+.timeline {
+  width: 100%;
+}
+
+
+.timeline-with-drawer {
+  width: calc(100% - 384px);
+}
+
+.detail {
+  width: 384px;
+}
+
+@media screen and (max-width: 996px) {
+  .timeline-with-drawer {
+    width: 0;
+    display: none;
+  }
+
+  .detail {
+    width: 100%;
+  }
+}

renderer/components/detail/Detail.tsx

@@ -1,12 +1,12 @@
 import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
+import { HTMLAttributes, useEffect, useState } from 'react'
 import { FaChevronLeft, FaX } from 'react-icons/fa6'
 import Thread from './Thread'
 import { MegalodonInterface } from 'megalodon'
 
 type Props = {
   client: MegalodonInterface
-}
+} & HTMLAttributes<HTMLElement>
 
 export default function Detail(props: Props) {
   const [target, setTarget] = useState<'status' | null>(null)
@@ -31,7 +31,7 @@ export default function Detail(props: Props) {
   return (
     <>
       {target && (
-        <div className="w-96 h-full fixed top-0 right-0 bg-white shadow-md">
+        <div className={`bg-white ${props.className}`} style={props.style}>
           <div className="bg-blue-900 text-gray-200 flex justify-between p-2 items-center" style={{ height: '50px' }}>
             <FaChevronLeft onClick={back} className="cursor-pointer text-lg" />
             <FaX onClick={close} className="cursor-pointer text-lg" />

renderer/components/detail/Thread.tsx

@@ -29,7 +29,7 @@ export default function Thread(props: Props) {
   return (
     <>
       <Virtuoso
-        style={{ height: '100%' }}
+        style={{ height: 'calc(100% - 50px)' }}
         data={[...ancestors, status, ...descendants].filter(s => s !== null)}
         itemContent={(_, status) => <Status client={props.client} status={status} key={status.id} onRefresh={() => {}} />}
       />

renderer/components/timelines/Timeline.tsx

@@ -6,6 +6,7 @@ import { Virtuoso } from 'react-virtuoso'
 import Status from './status/Status'
 import { FormattedMessage, useIntl } from 'react-intl'
 import Detail from '../detail/Detail'
+import { useRouter } from 'next/router'
 
 const TIMELINE_STATUSES_COUNT = 30
 const TIMELINE_MAX_STATUSES = 2147483647
@@ -20,6 +21,7 @@ export default function Timeline(props: Props) {
   const [unreads, setUnreads] = useState<Array<Entity.Status>>([])
   const [firstItemIndex, setFirstItemIndex] = useState(TIMELINE_MAX_STATUSES)
 
+  const router = useRouter()
   const { formatMessage } = useIntl()
   const scrollerRef = useRef<HTMLElement | null>(null)
   const streaming = useRef<WebSocketInterface | null>(null)
@@ -128,39 +130,48 @@ export default function Timeline(props: Props) {
     return false
   }, [firstItemIndex, statuses, setStatuses, unreads])
 
+  const timelineClass = () => {
+    if (router.query.status_id) {
+      return 'timeline-with-drawer'
+    }
+    return 'timeline'
+  }
+
   return (
-    <section className="h-full w-full">
-      <div className="w-full bg-blue-950 text-blue-100 p-2 flex justify-between">
-        <div className="text-lg font-bold">
-          <FormattedMessage id={`timeline.${props.timeline}`} />
+    <div className="flex w-full">
+      <section className={`h-full ${timelineClass()}`}>
+        <div className="w-full bg-blue-950 text-blue-100 p-2 flex justify-between">
+          <div className="text-lg font-bold">
+            <FormattedMessage id={`timeline.${props.timeline}`} />
+          </div>
+          <div className="w-64 text-xs">
+            <form>
+              <TextInput type="text" placeholder={formatMessage({ id: 'timeline.search' })} disabled sizing="sm" />
+            </form>
+          </div>
         </div>
-        <div className="w-64 text-xs">
-          <form>
-            <TextInput type="text" placeholder={formatMessage({ id: 'timeline.search' })} disabled sizing="sm" />
-          </form>
+        <div className={`overflow-x-hidden`} style={{ height: 'calc(100% - 50px)' }}>
+          <Virtuoso
+            style={{ height: '100%' }}
+            scrollerRef={ref => {
+              scrollerRef.current = ref as HTMLElement
+            }}
+            firstItemIndex={firstItemIndex}
+            atTopStateChange={prependUnreads}
+            data={statuses}
+            endReached={loadMore}
+            itemContent={(_, status) => (
+              <Status
+                client={props.client}
+                status={status}
+                key={status.id}
+                onRefresh={status => setStatuses(current => updateStatus(current, status))}
+              />
+            )}
+          />
         </div>
-      </div>
-      <div className="timeline overflow-y-auto w-full overflow-x-hidden" style={{ height: 'calc(100% - 50px)' }}>
-        <Virtuoso
-          style={{ height: '100%' }}
-          scrollerRef={ref => {
-            scrollerRef.current = ref as HTMLElement
-          }}
-          firstItemIndex={firstItemIndex}
-          atTopStateChange={prependUnreads}
-          data={statuses}
-          endReached={loadMore}
-          itemContent={(_, status) => (
-            <Status
-              client={props.client}
-              status={status}
-              key={status.id}
-              onRefresh={status => setStatuses(current => updateStatus(current, status))}
-            />
-          )}
-        />
-      </div>
-      <Detail client={props.client} />
-    </section>
+      </section>
+      <Detail client={props.client} className="detail" />
+    </div>
   )
 }