From 15ffb52ebbfcce4939d610d6b2003b7c63f8e4b5 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Tue, 17 Dec 2024 09:54:17 +0700
Subject: [PATCH] fix: starter screen layout

---
 web/containers/CenterPanelContainer/index.tsx            | 9 +++++++--
 .../ChatBody/OnDeviceStarterScreen/index.tsx             | 8 ++++++--
 web/screens/Thread/index.tsx                             | 2 +-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/web/containers/CenterPanelContainer/index.tsx b/web/containers/CenterPanelContainer/index.tsx
index fb2518dc77..b3df8face4 100644
--- a/web/containers/CenterPanelContainer/index.tsx
+++ b/web/containers/CenterPanelContainer/index.tsx
@@ -18,19 +18,24 @@ import {
 } from '@/helpers/atoms/App.atom'
 import { reduceTransparentAtom } from '@/helpers/atoms/Setting.atom'
 
-const CenterPanelContainer = ({ children }: PropsWithChildren) => {
+type Props = {
+  isShowStarterScreen?: boolean
+} & PropsWithChildren
+
+const CenterPanelContainer = ({ children, isShowStarterScreen }: Props) => {
   const reduceTransparent = useAtomValue(reduceTransparentAtom)
   const matches = useMediaQuery('(max-width: 880px)')
   const showLeftPanel = useAtomValue(showLeftPanelAtom)
   const showRightPanel = useAtomValue(showRightPanelAtom)
   const mainViewState = useAtomValue(mainViewStateAtom)
+
   return (
     <div
       className={twMerge('flex h-full w-full')}
       style={{
         maxWidth: matches
           ? '100%'
-          : mainViewState === MainViewState.Thread
+          : mainViewState === MainViewState.Thread && !isShowStarterScreen
             ? `calc(100% - (${showRightPanel ? Number(localStorage.getItem(RIGHT_PANEL_WIDTH)) : 0}px + ${showLeftPanel ? Number(localStorage.getItem(LEFT_PANEL_WIDTH)) : 0}px))`
             : '100%',
       }}
diff --git a/web/screens/Thread/ThreadCenterPanel/ChatBody/OnDeviceStarterScreen/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatBody/OnDeviceStarterScreen/index.tsx
index 44d1748ed9..af5853a3a9 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatBody/OnDeviceStarterScreen/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatBody/OnDeviceStarterScreen/index.tsx
@@ -40,7 +40,11 @@ import {
 } from '@/helpers/atoms/Model.atom'
 import { selectedSettingAtom } from '@/helpers/atoms/Setting.atom'
 
-const OnDeviceStarterScreen = () => {
+type Props = {
+  isShowStarterScreen?: boolean
+}
+
+const OnDeviceStarterScreen = ({ isShowStarterScreen }: Props) => {
   const { extensionHasSettings } = useStarterScreen()
   const [searchValue, setSearchValue] = useState('')
   const [isOpen, setIsOpen] = useState(Boolean(searchValue.length))
@@ -103,7 +107,7 @@ const OnDeviceStarterScreen = () => {
   const [visibleRows, setVisibleRows] = useState(1)
 
   return (
-    <CenterPanelContainer>
+    <CenterPanelContainer isShowStarterScreen={isShowStarterScreen}>
       <ScrollArea className="flex h-full w-full items-center">
         <div className="relative mt-4 flex h-full w-full flex-col items-center justify-center">
           <div className="mx-auto flex h-full w-3/4 flex-col items-center justify-center py-16 text-center">
diff --git a/web/screens/Thread/index.tsx b/web/screens/Thread/index.tsx
index 6789c181d4..c3963067a0 100644
--- a/web/screens/Thread/index.tsx
+++ b/web/screens/Thread/index.tsx
@@ -17,7 +17,7 @@ type Props = {
 
 const ThreadPanels = memo(({ isShowStarterScreen }: Props) => {
   return isShowStarterScreen ? (
-    <OnDeviceStarterScreen />
+    <OnDeviceStarterScreen isShowStarterScreen={isShowStarterScreen} />
   ) : (
     <>
       <ThreadLeftPanel />