From 6767a01700d1242efba9c0ec71f225adf69b94ca Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Sat, 7 Feb 2026 20:25:39 +0100
Subject: [PATCH] More seamless problems UI

---
 src/app/problems/page.tsx | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/app/problems/page.tsx b/src/app/problems/page.tsx
index 4eacb13..2abc43d 100644
--- a/src/app/problems/page.tsx
+++ b/src/app/problems/page.tsx
@@ -32,24 +32,13 @@ export default function Problems() {
         </div>
 
         {/* Filters */}
-        <div className="flex flex-col lg:flex-row gap-4 items-start lg:items-center">
+        <div className="flex flex-row flex-wrap gap-4 items-start lg:items-center">
           {/* Search */}
           <div className="relative flex-1 max-w-md">
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
             <Input placeholder="Search problems..." className="pl-9" />
           </div>
 
-          {/* Category Filter */}
-          <div className="flex flex-wrap gap-2">
-            <ToggleGroup variant="outline" type="multiple">
-              {["Arrays", "Trees", "Graphs", "DP", "Strings"].map((f) => (
-                <ToggleGroupItem value={f.toLowerCase()} aria-label={f} key={f}>
-                  {f}
-                </ToggleGroupItem>
-              ))}
-            </ToggleGroup>
-          </div>
-
           {/* Difficulty Filter */}
           <div className="flex flex-wrap gap-2">
             <ToggleGroup variant="outline" type="multiple">
@@ -63,7 +52,9 @@ export default function Problems() {
 
           {/* View Toggle */}
           <ToggleGroup
+            className="hidden md:block"
             type="single"
+            variant="outline"
             value={viewMode}
             onValueChange={(v) => v && setViewMode(v as "grid" | "list")}
           >