fix: starter screen layout (#4279)

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%',
       }}

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">

web/screens/Thread/index.tsx

@@ -17,7 +17,7 @@ type Props = {
 
 const ThreadPanels = memo(({ isShowStarterScreen }: Props) => {
   return isShowStarterScreen ? (
-    <OnDeviceStarterScreen />
+    <OnDeviceStarterScreen isShowStarterScreen={isShowStarterScreen} />
   ) : (
     <>
       <ThreadLeftPanel />