From c9b60fc6d4af83903cbe6bcc4621e5c081417d3f Mon Sep 17 00:00:00 2001
From: molvqingtai <molvqingtai@gmail.com>
Date: Fri, 27 Sep 2024 09:03:22 +0800
Subject: [PATCH] perf: adapt to small screen

---
 src/app/content/index.tsx                    | 2 +-
 src/app/content/views/AppContainer/index.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/content/index.tsx b/src/app/content/index.tsx
index b0e1205..7ae07b5 100644
--- a/src/app/content/index.tsx
+++ b/src/app/content/index.tsx
@@ -19,6 +19,7 @@ export default defineContentScript({
   cssInjectionMode: 'ui',
   runAt: 'document_end',
   matches: ['https://*/*'],
+
   async main(ctx) {
     const store = Remesh.store({
       externs: [IndexDBStorageImpl, BrowserSyncStorageImpl, PeerRoomImpl, ToastImpl],
@@ -32,7 +33,6 @@ export default defineContentScript({
       append: 'last',
       mode: 'closed',
       onMount: (container) => {
-        // container.style.visibility = 'visible'
         const app = createElement('<div id="app"></div>')
         container.append(app)
 
diff --git a/src/app/content/views/AppContainer/index.tsx b/src/app/content/views/AppContainer/index.tsx
index 5aab1e4..223cf3e 100644
--- a/src/app/content/views/AppContainer/index.tsx
+++ b/src/app/content/views/AppContainer/index.tsx
@@ -10,7 +10,7 @@ export interface AppContainerProps {
 const AppContainer: FC<AppContainerProps> = ({ children, open }) => {
   const { size, ref } = useResizable({
     initSize: Math.max(375, window.innerWidth / 6),
-    maxSize: Math.max(750, window.innerWidth / 3),
+    maxSize: Math.min(750, window.innerWidth / 3),
     minSize: Math.max(375, window.innerWidth / 5),
     direction: 'left'
   })
@@ -26,7 +26,7 @@ const AppContainer: FC<AppContainerProps> = ({ children, open }) => {
           style={{
             width: `${size}px`
           }}
-          className="fixed bottom-10 right-10 z-infinity box-border grid h-full max-h-[1200px] grid-flow-col grid-rows-[auto_1fr_auto] rounded-xl bg-slate-50 font-sans shadow-2xl"
+          className="fixed bottom-10 right-10 z-infinity box-border grid h-screen max-h-[min(calc(100vh_-60px),_1200px)] grid-flow-col grid-rows-[auto_1fr_auto] rounded-xl bg-slate-50 font-sans shadow-2xl"
         >
           {children}
           <div