width wide rating category buttons

client/src/pages/RatingsPage.tsx

@@ -314,20 +314,22 @@ function RatingsPage({ user }: Props) {
       <style>{`input[type="checkbox"]{-webkit-appearance:none;appearance:none;width:14px;height:14px;border:1px solid #424e88;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;margin:0;padding:0}input[type="checkbox"]:checked{background:#424e88!important}input[type="checkbox"]:checked::after{content:"✓";color:#fff;font-size:11px;font-weight:700;line-height:1}`}</style>
       <div style={{ fontSize: 28, fontWeight: 700, color: textClr, marginBottom: 12 }}>ratings</div>
       <div style={{ fontSize: 15, color: textClr, marginBottom: 20, whiteSpace: "pre-line" }}>rate some random stuff{'\n\n'}Accounts get to place 3 stars per rating category, put them on your all time favs.</div>
-      <div style={{ display: "flex", alignItems: "center", gap: 4, overflowX: "auto", marginBottom: 8 }}>
-        {ratingTypes.map((t) => (
+      <div style={{ display: "flex", width: "100%", marginBottom: 8, border: `1px solid ${borderClr}`, borderRadius: 6, overflow: "hidden" }}>
+        {ratingTypes.map((t, i) => (
           <button
             key={t.id}
             onClick={() => { setSearch(""); navigate(`/ratings/${t.name}`); setSelectedCatId(t.categories[0]?.id ?? null); setSelectedId(null); setExpandedIds(new Set()); setSortMode("default"); }}
             style={{
-              padding: "6px 12px",
+              flex: 1,
+              padding: "8px 12px",
               fontSize: 14,
+              fontWeight: 700,
               whiteSpace: "nowrap",
-              background: category === t.name ? "#424e88" : cardBg,
+              background: category === t.name ? "#424e88" : dark ? "#2a2a2a" : "#f0f0f0",
               color: category === t.name ? "#fff" : textClr,
-              border: `1px solid ${category === t.name ? "#424e88" : borderClr}`,
+              border: "none",
+              borderRight: i < ratingTypes.length - 1 ? `1px solid ${borderClr}` : "none",
               cursor: "pointer",
-              flexShrink: 0,
             }}
           >
             {t.name}