opt: card size

src/renderer/src/assets/main.css

@@ -138,3 +138,9 @@
     background: #c0c1c58f;
   }
 }
+
+.sider-card-title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}

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

@@ -218,7 +218,7 @@ const ConnCard: React.FC<Props> = (props) => {
             </CardBody>
             <CardFooter className="pt-1">
               <h3
-                className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+                className={`text-md font-bold sider-card-title ${match ? 'text-primary-foreground' : 'text-foreground'}`}
               >
                 {t('sider.cards.connections')}
               </h3>

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

@@ -102,7 +102,7 @@ const DNSCard: React.FC<Props> = (props) => {
         </CardBody>
         <CardFooter className="pt-1">
           <h3
-            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+            className={`text-md font-bold sider-card-title ${match ? 'text-primary-foreground' : 'text-foreground'}`}
           >
             {t('sider.cards.dns')}
           </h3>

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

@@ -84,7 +84,7 @@ const LogCard: React.FC<Props> = (props) => {
         </CardBody>
         <CardFooter className="pt-1">
           <h3
-            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+            className={`text-md font-bold text-ellipsis whitespace-nowrap overflow-hidden ${match ? 'text-primary-foreground' : 'text-foreground'}`}
           >
             {t('sider.cards.logs')}
           </h3>

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

@@ -158,7 +158,7 @@ const MihomoCoreCard: React.FC<Props> = (props) => {
           </CardBody>
           <CardFooter className="pt-1">
             <h3
-              className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+              className={`text-md font-bold text-ellipsis whitespace-nowrap overflow-hidden ${match ? 'text-primary-foreground' : 'text-foreground'}`}
             >
               {t('sider.cards.core')}
             </h3>

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

@@ -83,7 +83,7 @@ const OverrideCard: React.FC<Props> = (props) => {
         </CardBody>
         <CardFooter className="pt-1">
           <h3
-            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+            className={`text-md font-bold text-ellipsis whitespace-nowrap overflow-hidden ${match ? 'text-primary-foreground' : 'text-foreground'}`}
           >
             {t('sider.cards.override')}
           </h3>

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

@@ -238,7 +238,7 @@ const ProfileCard: React.FC<Props> = (props) => {
           </CardBody>
           <CardFooter className="pt-1">
             <h3
-              className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+              className={`text-md font-bold sider-card-title ${match ? 'text-primary-foreground' : 'text-foreground'}`}
             >
               {t('sider.cards.profiles')}
             </h3>

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

@@ -103,7 +103,7 @@ const ProxyCard: React.FC<Props> = (props) => {
         </CardBody>
         <CardFooter className="pt-1">
           <h3
-            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+            className={`text-md font-bold sider-card-title ${match ? 'text-primary-foreground' : 'text-foreground'}`}
           >
             {t('proxies.card.title')}
           </h3>

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

@@ -84,7 +84,7 @@ const ResourceCard: React.FC<Props> = (props) => {
         </CardBody>
         <CardFooter className="pt-1">
           <h3
-            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+            className={`text-md font-bold text-ellipsis whitespace-nowrap overflow-hidden ${match ? 'text-primary-foreground' : 'text-foreground'}`}
           >
             {t('sider.cards.resources')}
           </h3>

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

@@ -104,7 +104,7 @@ const RuleCard: React.FC<Props> = (props) => {
         </CardBody>
         <CardFooter className="pt-1">
           <h3
-            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+            className={`text-md font-bold text-ellipsis whitespace-nowrap overflow-hidden ${match ? 'text-primary-foreground' : 'text-foreground'}`}
           >
             {t('sider.cards.rules')}
           </h3>

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

@@ -102,7 +102,7 @@ const SniffCard: React.FC<Props> = (props) => {
         </CardBody>
         <CardFooter className="pt-1">
           <h3
-            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+            className={`text-md font-bold text-ellipsis whitespace-nowrap overflow-hidden ${match ? 'text-primary-foreground' : 'text-foreground'}`}
           >
             {t('sider.cards.sniff')}
           </h3>

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

@@ -84,7 +84,7 @@ const SubStoreCard: React.FC<Props> = (props) => {
         </CardBody>
         <CardFooter className="pt-1">
           <h3
-            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+            className={`text-md font-bold text-ellipsis whitespace-nowrap overflow-hidden ${match ? 'text-primary-foreground' : 'text-foreground'}`}
           >
             {t('sider.cards.substore')}
           </h3>

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

@@ -116,7 +116,7 @@ const SysproxySwitcher: React.FC<Props> = (props) => {
         </CardBody>
         <CardFooter className="pt-1">
           <h3
-            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+            className={`text-md font-bold sider-card-title ${match ? 'text-primary-foreground' : 'text-foreground'}`}
           >
             {t('sider.cards.systemProxy')}
           </h3>

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

@@ -150,7 +150,7 @@ const TunSwitcher: React.FC<Props> = (props) => {
         </CardBody>
         <CardFooter className="pt-1">
           <h3
-            className={`text-md font-bold ${match ? 'text-primary-foreground' : 'text-foreground'}`}
+            className={`text-md font-bold sider-card-title ${match ? 'text-primary-foreground' : 'text-foreground'}`}
           >
             {t('sider.cards.tun')}
           </h3>