From 276269e583b85bde6207d7ca7b51836fed097b42 Mon Sep 17 00:00:00 2001
From: Phantom <59059173+EurFelux@users.noreply.github.com>
Date: Fri, 12 Sep 2025 16:00:39 +0800
Subject: [PATCH] style(MinApp): responsive layout for MinAppPage (#10125)

style(MinApp): adjust container styles for better layout

- Add min-height to MinApp container
- Remove absolute positioning from search bar
- Improve flex and overflow handling in containers
- Adjust margins and widths for better spacing
---
 src/renderer/src/components/MinApp/MinApp.tsx  |  1 +
 src/renderer/src/pages/minapps/MinAppsPage.tsx | 12 +++++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/renderer/src/components/MinApp/MinApp.tsx b/src/renderer/src/components/MinApp/MinApp.tsx
index 853d37d109..5833ed9b1a 100644
--- a/src/renderer/src/components/MinApp/MinApp.tsx
+++ b/src/renderer/src/components/MinApp/MinApp.tsx
@@ -135,6 +135,7 @@ const Container = styled.div`
   align-items: center;
   cursor: pointer;
   overflow: hidden;
+  min-height: 85px;
 `
 
 const IconContainer = styled.div`
diff --git a/src/renderer/src/pages/minapps/MinAppsPage.tsx b/src/renderer/src/pages/minapps/MinAppsPage.tsx
index db82bf43a3..5aadc22020 100644
--- a/src/renderer/src/pages/minapps/MinAppsPage.tsx
+++ b/src/renderer/src/pages/minapps/MinAppsPage.tsx
@@ -46,10 +46,7 @@ const AppsPage: FC = () => {
             style={{
               width: '30%',
               height: 28,
-              borderRadius: 15,
-              position: 'absolute',
-              left: '50vw',
-              transform: 'translateX(-50%)'
+              borderRadius: 15
             }}
             size="small"
             variant="filled"
@@ -107,6 +104,7 @@ const Container = styled.div`
   flex: 1;
   flex-direction: column;
   height: 100%;
+  overflow: hidden;
 `
 
 const ContentContainer = styled.div`
@@ -132,11 +130,13 @@ const MainContainer = styled.div`
   flex: 1;
   flex-direction: row;
   height: calc(100vh - var(--navbar-height));
+  width: 100%;
 `
 
 const RightContainer = styled(Scrollbar)`
   display: flex;
-  flex: 1;
+  flex: 1 1 0%;
+  min-width: 0;
   flex-direction: column;
   height: 100%;
   align-items: center;
@@ -150,6 +150,7 @@ const AppsContainerWrapper = styled(Scrollbar)`
   justify-content: center;
   padding: 50px 0;
   width: 100%;
+  margin-bottom: 20px;
   [navbar-position='top'] & {
     padding: 20px 0;
   }
@@ -159,6 +160,7 @@ const AppsContainer = styled.div`
   display: grid;
   min-width: 0;
   max-width: 930px;
+  margin: 0 20px;
   width: 100%;
   grid-template-columns: repeat(auto-fill, 90px);
   gap: 25px;