refactor(ui): optimize search and sort bar layout for better responsive display

Author: NekoAria

src/components/Article/SearchAndSortBar.css

@@ -16,12 +16,9 @@
   white-space: nowrap;
   overflow: hidden;
   flex: 1;
-  justify-content: space-between;
 }
 
 .search-and-sort-bar .page-info .title-container {
-  flex: 1;
-  min-width: 0;
   overflow: hidden;
 }
 
@@ -35,14 +32,14 @@
 .search-and-sort-bar .page-info .count-label {
   color: var(--color-text-4);
   margin-left: 6px;
-  flex-shrink: 0;
+  flex: 0 0 auto;
   font-weight: 500;
-  text-align: right;
+  display: inline-block;
 }
 
 .search-and-sort-bar .button-group {
   display: flex;
-  flex-shrink: 0;
+  flex: 0 0 auto;
   gap: 8px;
   margin: 0 8px;
 }

src/components/Article/SearchAndSortBar.jsx

@@ -209,22 +209,24 @@ const SearchAndSortBar = () => {
   return (
     <div className="search-and-sort-bar" style={{ width: isBelowMedium ? "100%" : 370 }}>
       <SidebarTrigger />
-      {title && (
-        <div className="page-info">
-          <div className="title-container">
+      <div className="page-info">
+        <div className="title-container">
+          {title ? (
             <Typography.Ellipsis
               expandable={false}
               showTooltip={!isBelowMedium}
               style={{ fontWeight: 500 }}
             >
               {title}
             </Typography.Ellipsis>
-          </div>
-          {isArticleListReady && count > 0 && (
-            <Typography.Text className="count-label">({count})</Typography.Text>
+          ) : (
+            <div className="placeholder-title"></div>
           )}
         </div>
-      )}
+        {isArticleListReady && count > 0 && (
+          <Typography.Text className="count-label">({count})</Typography.Text>
+        )}
+      </div>
       <div className="button-group">
         <ActiveButton
           active={!!filterString}