From 09d77657a07f81d69f80c3eea1620efe1ddb9da9 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Sun, 22 Sep 2024 19:22:54 +0800
Subject: [PATCH] fix: app width limit to 1024px

Signed-off-by: Innei <i@innei.in>
---
 apps/renderer/src/pages/(main)/layout.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/apps/renderer/src/pages/(main)/layout.tsx b/apps/renderer/src/pages/(main)/layout.tsx
index a348ff81b..9f08904e9 100644
--- a/apps/renderer/src/pages/(main)/layout.tsx
+++ b/apps/renderer/src/pages/(main)/layout.tsx
@@ -9,6 +9,7 @@ import { useResizable } from "react-resizable-layout"
 import { Outlet } from "react-router-dom"
 
 import { setMainContainerElement } from "~/atoms/dom"
+import { useViewport } from "~/atoms/hooks/viewport"
 import { getUISettings, setUISetting } from "~/atoms/settings/ui"
 import { setFeedColumnShow, useFeedColumnShow } from "~/atoms/sidebar"
 import { useLoginModalShow, useWhoami } from "~/atoms/user"
@@ -79,6 +80,24 @@ export function Component() {
 
   useDailyTask()
 
+  const isNotSupportWidth = useViewport((v) => v.w < 1024)
+
+  if (isNotSupportWidth) {
+    return (
+      <div className="center fixed inset-0 flex-col">
+        <i className="i-mingcute-device-line mb-2 size-16 text-muted-foreground" />
+        <div>Please using desktop app to using {APP_NAME}</div>
+
+        <div>
+          Download:{" "}
+          <a className="follow-link--underline" href={repository.url}>
+            {repository.url}
+          </a>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div
       className="flex h-screen overflow-hidden"