use grid layout

src/renderer/src/App.tsx

@@ -51,11 +51,8 @@ const App: React.FC = () => {
             />
           </div>
         </div>
-
-        <div className="m-2">
+        <div className="grid grid-cols-2 gap-2 mx-2">
           <OutboundModeSwitcher />
-        </div>
-        {/* <div className="grid">
           <SysproxySwitcher />
           <TunSwitcher />
           <ProfileCard />
@@ -66,10 +63,10 @@ const App: React.FC = () => {
           <SniffCard />
           <LogCard />
           <RuleCard />
-          <TestCard />
+          <ResourceCard />
           <OverrideCard />
-        </div> */}
-        <div className="flex justify-between mx-2 mb-2">
+        </div>
+        {/* <div className="flex justify-between mx-2 mb-2">
           <SysproxySwitcher />
           <TunSwitcher />
         </div>
@@ -91,7 +88,7 @@ const App: React.FC = () => {
         <div className="flex justify-between mx-2">
           <ResourceCard />
           <OverrideCard />
-        </div>
+        </div> */}
       </div>
       <Divider orientation="vertical" />
       <div className="main w-[calc(100%-251px)] h-full overflow-y-auto">{page}</div>

src/renderer/src/components/sider/conn-card.tsx

@@ -26,7 +26,7 @@ const ConnCard: React.FC = () => {
   return (
     <Card
       fullWidth
-      className={`mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-2 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/connections')}
     >

src/renderer/src/components/sider/dns-card.tsx

@@ -20,7 +20,7 @@ const DNSCard: React.FC = () => {
 
   return (
     <Card
-      className={`w-[50%] mr-1 mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-1 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/dns')}
     >

src/renderer/src/components/sider/log-card.tsx

@@ -8,7 +8,7 @@ const LogCard: React.FC = () => {
   const match = location.pathname.includes('/logs')
   return (
     <Card
-      className={`w-[50%] mr-1 mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-1 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/logs')}
     >

src/renderer/src/components/sider/mihomo-core-card.tsx

@@ -35,7 +35,7 @@ const MihomoCoreCard: React.FC = () => {
       fullWidth
       isPressable
       onPress={() => navigate('/mihomo')}
-      className={`mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-2 ${match ? 'bg-primary' : ''}`}
     >
       <CardBody>
         <div className="flex justify-between h-[32px]">

src/renderer/src/components/sider/outbound-mode-switcher.tsx

@@ -22,6 +22,7 @@ const OutboundModeSwitcher: React.FC = () => {
     <Tabs
       fullWidth
       color="primary"
+      className="col-span-2"
       selectedKey={mode}
       onSelectionChange={(key: Key) => onChangeMode(key as OutboundMode)}
     >

src/renderer/src/components/sider/override-card.tsx

@@ -12,7 +12,7 @@ const OverrideCard: React.FC = () => {
 
   return (
     <Card
-      className={`w-[50%] ml-1 mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-1 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/override')}
     >

src/renderer/src/components/sider/profile-card.tsx

@@ -36,7 +36,7 @@ const ProfileCard: React.FC = () => {
       {showRuntimeConfig && <ConfigViewer onClose={() => setShowRuntimeConfig(false)} />}
       <Card
         fullWidth
-        className={`mb-2 ${match ? 'bg-primary' : ''}`}
+        className={`col-span-2 ${match ? 'bg-primary' : ''}`}
         isPressable
         onPress={() => navigate('/profiles')}
       >

src/renderer/src/components/sider/proxy-card.tsx

@@ -18,7 +18,7 @@ const ProxyCard: React.FC = () => {
   return (
     <Card
       fullWidth
-      className={`mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-2 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/proxies')}
     >

src/renderer/src/components/sider/resource-card.tsx

@@ -10,7 +10,7 @@ const ResourceCard: React.FC = () => {
 
   return (
     <Card
-      className={`w-[50%] mr-1 mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-1 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/resources')}
     >

src/renderer/src/components/sider/rule-card.tsx

@@ -14,7 +14,7 @@ const RuleCard: React.FC = () => {
 
   return (
     <Card
-      className={`w-[50%] ml-1 mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-1 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/rules')}
     >

src/renderer/src/components/sider/sniff-card.tsx

@@ -20,7 +20,7 @@ const SniffCard: React.FC = () => {
 
   return (
     <Card
-      className={`w-[50%] ml-1 mb-2 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-1 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/sniffer')}
     >

src/renderer/src/components/sider/sysproxy-switcher.tsx

@@ -25,7 +25,7 @@ const SysproxySwitcher: React.FC = () => {
 
   return (
     <Card
-      className={`w-[50%] mr-1 ${match ? 'bg-primary' : ''}`}
+      className={`col-span-1 ${match ? 'bg-primary' : ''}`}
       isPressable
       onPress={() => navigate('/sysproxy')}
     >

src/renderer/src/components/sider/tun-switcher.tsx

@@ -52,7 +52,7 @@ const TunSwitcher: React.FC = () => {
         />
       )}
       <Card
-        className={`w-[50%] ml-1 ${match ? 'bg-primary' : ''}`}
+        className={`col-span-1 ${match ? 'bg-primary' : ''}`}
         isPressable
         onPress={() => navigate('/tun')}
       >