expressions tab styling fixes (#318)

- added title
- fixed broken layout

app/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ExpressionTab.tsx

@@ -5,50 +5,58 @@ import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/itemTabs/It
 import { Button } from "~/components";
 import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
 import { twMerge } from "tailwind-merge";
+import { TabTitle } from "../comps/TabTitle";
 
 export const ExpressionTab = () => {
   useSignals();
 
   return (
     <>
-      <div className="w-full overflow-x-auto">
-        <div className="mb-4 mt-4 flex justify-start gap-2 px-4">
-          <button
-            className={twMerge(
-              "filter-tab",
-              expressionFilter.value === AssetFilterOption.ALL ? "active" : "",
-              "disabled",
-            )}
-            onClick={() => (expressionFilter.value = AssetFilterOption.ALL)}>
-            All
-          </button>
-          <button
-            className={twMerge(
-              "filter-tab",
-              expressionFilter.value === AssetFilterOption.MINE ? "active" : "",
-              "disabled",
-            )}
-            onClick={() => (expressionFilter.value = AssetFilterOption.MINE)}
-            disabled={!expressionItems.value.some((item) => item.isMine)}>
-            My Expressions
-          </button>
-          <button
-            className={twMerge(
-              "filter-tab",
-              expressionFilter.value === AssetFilterOption.BOOKMARKED
-                ? "active"
-                : "",
-              "disabled",
-            )}
-            onClick={() =>
-              (expressionFilter.value = AssetFilterOption.BOOKMARKED)
-            }
-            disabled={!expressionItems.value.some((item) => item.isBookmarked)}>
-            Bookmarked
-          </button>
+      <TabTitle title="Expressions" />
+
+      <div>
+        <div>
+          <div className="flex gap-2 overflow-x-auto overflow-y-hidden px-4">
+            <button
+              className={twMerge(
+                "filter-tab",
+                expressionFilter.value === AssetFilterOption.ALL
+                  ? "active"
+                  : "",
+              )}
+              onClick={() => (expressionFilter.value = AssetFilterOption.ALL)}>
+              All
+            </button>
+            <button
+              className={twMerge(
+                "filter-tab",
+                expressionFilter.value === AssetFilterOption.MINE
+                  ? "active"
+                  : "",
+              )}
+              onClick={() => (expressionFilter.value = AssetFilterOption.MINE)}
+              disabled={!expressionItems.value.some((item) => item.isMine)}>
+              My Expressions
+            </button>
+            <button
+              className={twMerge(
+                "filter-tab",
+                expressionFilter.value === AssetFilterOption.BOOKMARKED
+                  ? "active"
+                  : "",
+              )}
+              onClick={() =>
+                (expressionFilter.value = AssetFilterOption.BOOKMARKED)
+              }
+              disabled={
+                !expressionItems.value.some((item) => item.isBookmarked)
+              }>
+              Bookmarked
+            </button>
+          </div>
         </div>
       </div>
-      <div className="w-full px-4 pb-4">
+      <div className="w-full px-4">
         <Button
           icon={faCirclePlus}
           variant="action"
@@ -56,7 +64,7 @@ export const ExpressionTab = () => {
           Upload Expression
         </Button>
       </div>
-      <div className="h-full w-full overflow-y-auto px-4">
+      <div className="h-full grow overflow-y-auto px-4">
         <ItemElements
           items={expressionItems.value}
           assetFilter={expressionFilter.value}