fix: ai daily report layout in mobile

Signed-off-by: Innei <tukon479@gmail.com>
RSSNext · Dec 2, 2024 · 64c7df1 · 64c7df1
1 parent 3c7aeac
commit 64c7df1
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/apps/renderer/src/modules/ai/ai-daily/FeedDailyModalContent.tsx b/apps/renderer/src/modules/ai/ai-daily/FeedDailyModalContent.tsx
@@ -21,7 +21,7 @@ export const FeedDailyModalContent = () => {
         ))}
       </TabsList>
 
-      <div className="flex grow flex-col items-center overflow-auto">
+      <div className="-mx-2 flex grow flex-col items-center overflow-auto lg:mx-0">
         {tabs.map((tab: any) => (
           <TabsContent
             key={tab}

diff --git a/apps/renderer/src/modules/ai/ai-daily/daily.tsx b/apps/renderer/src/modules/ai/ai-daily/daily.tsx
@@ -189,30 +189,31 @@ export const DailyReportModalContent: Component<DailyReportContentProps> = ({
   view,
 }) => {
   const content = useQueryData({ endDate, startDate, view })
-
-  const RelatedEntryLink = useState(() => createRelatedEntryLink("toast"))[0]
   const { t } = useTranslation()
+  const RelatedEntryLink = useState(() => createRelatedEntryLink("toast"))[0]
+
   if (!content.data && !content.isLoading)
     return (
-      <div className="center pointer-events-none absolute inset-0 translate-y-6 flex-col gap-4 opacity-80">
+      <div className="center pointer-events-none inset-0 my-8 flex-col gap-4 opacity-80 lg:absolute lg:my-0 lg:translate-y-6">
         <EmptyIcon />
         <p>{t("ai_daily.no_found")}</p>
       </div>
     )
+
   return (
     <div className="center grow flex-col">
       <div className="flex grow flex-col">
         {content.isLoading ? (
           <LoadingCircle
             size="large"
-            className="center pointer-events-none absolute inset-0 mt-8 text-center"
+            className="center pointer-events-none h-24 text-center lg:absolute lg:inset-0 lg:mt-8 lg:h-auto"
           />
         ) : content.data ? (
           <Markdown
             components={{
               a: RelatedEntryLink as Components["a"],
             }}
-            className="prose-sm mt-4 h-0 grow overflow-auto px-6 prose-p:my-1 prose-ul:my-1 prose-ul:list-outside prose-ul:list-disc prose-li:marker:text-accent"
+            className="prose-sm mt-4 grow overflow-auto px-2 prose-p:my-1 prose-ul:my-1 prose-ul:list-outside prose-ul:list-disc prose-li:marker:text-accent lg:h-0 lg:px-6"
           >
             {content.data}
           </Markdown>