Fixed PLayright test, and category filter for product page

Author: ievel1

gui_afsluttende/src/App.css

@@ -1,10 +0,0 @@
-#root {
-  width: 100%;
-}
-
-.class_wrapper {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-

gui_afsluttende/src/components/CategoryBar/CategoryBar.jsx

@@ -49,7 +49,7 @@ export default function CategoryBar() {
     <div className="category-bar">
       <div className="container category-inner">
         <button
-          className={"cat-btn" + (active === "all" ? " active" : "")}
+          className={"cat-btn"}
           onClick={() => goCategory("all")}
         >
           Alle kategorier
@@ -58,9 +58,7 @@ export default function CategoryBar() {
         {categories.map((c) => (
           <button
             key={c.id}
-            className={
-              "cat-btn" + (String(active) === String(c.id) ? " active" : "")
-            }
+            className={"cat-btn" }
             onClick={() => goCategory(c.id)}
           >
             {c.title}

gui_afsluttende/src/components/GridContainer/GridContainer.jsx

@@ -5,19 +5,19 @@ export default function GridContainer({ products, children }) {
   if (products && products.length) {
     return (
       <div className="product-grid">
-        {products.map((item) => (
-          <article key={item.id} className="product-card">
-            {item.image_url && (
+        {products.map((product) => (
+          <article key={product.id} className="product-card">
+            {product.image_url && (
               <img
                 className="product-image"
-                src={item.image_url}
-                alt={item.title}
+                src={product.image_url}
+                alt={product.title}
               />
             )}
-            <h3 className="product-title">{item.title}</h3>
-            <p className="product-price">Price: {item.price}</p>
-            <p className="product-desc">{item.description}</p>
-            <Link className="product-link" to={`/products/${item.id}`}>
+            <h3 className="product-title">{product.title}</h3>
+            <p className="product-price">Price: {product.price}</p>
+            <p className="product-desc">{product.description}</p>
+            <Link className="product-link" to={`/products/${product.id}`}>
               View Descriptions
             </Link>
           </article>

gui_afsluttende/src/index.css

@@ -35,7 +35,7 @@ body {
   color: var(--text);
 }
 
-/* Center content like in Figma */
+
 .container {
   max-width: var(--container);
   margin: 0 auto;
@@ -57,4 +57,4 @@ button {
   cursor: pointer;
 }
 
-/* Light mode adjustments can be added later if needed */
+