refactor: enhance button accessibility and simplify rendering logic in CompactModeButton and UnreadFilterButton components; adjust layout in PageSizeSelect component

src/components/common/CompactModeButton.tsx

@@ -20,18 +20,12 @@ export function CompactModeButton({ onToggle }: CompactModeButtonProps) {
     <button
       onClick={handleClick}
       className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
+      title={isCompact ? t("series.filters.normal") : t("series.filters.compact")}
     >
-      {isCompact ? (
+      {isCompact ? <LayoutTemplate className="h-4 w-4" /> : <LayoutGrid className="h-4 w-4" />}
-        <>
+      <span className="hidden sm:inline">
-          <LayoutTemplate className="h-4 w-4" />
+        {isCompact ? t("series.filters.normal") : t("series.filters.compact")}
-          {t("series.filters.normal")}
+      </span>
-        </>
-      ) : (
-        <>
-          <LayoutGrid className="h-4 w-4" />
-          {t("series.filters.compact")}
-        </>
-      )}
     </button>
   );
 }

src/components/common/PageSizeSelect.tsx

@@ -24,8 +24,8 @@ export function PageSizeSelect({ onSizeChange }: PageSizeSelectProps) {
   return (
     <Select value={itemsPerPage.toString()} onValueChange={handleChange}>
       <SelectTrigger className="w-[80px]">
-        <LayoutList className="h-4 w-4 mr-2" />
+        <LayoutList className="h-4 w-4" />
-        <SelectValue />
+        <SelectValue className="ml-2" />
       </SelectTrigger>
       <SelectContent>
         <SelectItem value="20">20</SelectItem>

src/components/common/UnreadFilterButton.tsx

@@ -13,9 +13,12 @@ export function UnreadFilterButton({ showOnlyUnread, onToggle }: UnreadFilterBut
     <button
       onClick={onToggle}
       className="inline-flex items-center gap-2 px-2 py-1.5 text-sm font-medium rounded-lg hover:bg-accent hover:text-accent-foreground whitespace-nowrap"
+      title={showOnlyUnread ? t("series.filters.showAll") : t("series.filters.unread")}
     >
       <Filter className="h-4 w-4" />
+      <span className="hidden sm:inline">
         {showOnlyUnread ? t("series.filters.showAll") : t("series.filters.unread")}
+      </span>
     </button>
   );
 }