From e98ffa9baf0b23f2a86f4f5443f4ea626d0b9533 Mon Sep 17 00:00:00 2001
From: 24bartixx <jestgitbartix@gmail.com>
Date: Sun, 29 Mar 2026 23:38:50 +0200
Subject: [PATCH 1/2] feat: styling enhancements for creator

---
 .../creator/creator-board/creator-board.tsx   |  2 +-
 .../creator-control/creator-control.tsx       | 20 +++++++++++++----
 .../creator-items-select.tsx                  | 22 +++++++++----------
 .../creator/creator-name/creator-name.tsx     |  7 ++++--
 client/src/pages/creator.tsx                  | 16 +++++++-------
 5 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/client/src/components/creator/creator-board/creator-board.tsx b/client/src/components/creator/creator-board/creator-board.tsx
index 16d1a95..71ed178 100644
--- a/client/src/components/creator/creator-board/creator-board.tsx
+++ b/client/src/components/creator/creator-board/creator-board.tsx
@@ -41,7 +41,7 @@ export function CreatorBoard({ dims }: CreatorBoardProps) {
 
   return (
     <div
-      className="h-full overflow-hidden rounded-lg bg-[#4b2a86] p-4 shadow-lg"
+      className="h-full w-full overflow-hidden rounded-lg bg-[#4b2a86] p-4 shadow-lg"
       ref={boardRef}
     >
       <div className="flex min-h-full items-center">
diff --git a/client/src/components/creator/creator-control/creator-control.tsx b/client/src/components/creator/creator-control/creator-control.tsx
index e07b465..31b89f9 100644
--- a/client/src/components/creator/creator-control/creator-control.tsx
+++ b/client/src/components/creator/creator-control/creator-control.tsx
@@ -27,7 +27,11 @@ export function CreatorControl({ dims, setDims }: CreatorControlProps) {
   const isColsMax = cols >= MAX_DIM;
 
   return (
-    <div className="flex h-full items-center gap-6 rounded-lg bg-[#4b2a86] py-4 pr-4 pl-6 shadow-lg">
+    <div
+      className="flex h-full w-full items-center gap-6 rounded-lg bg-[#4b2a86] p-4 shadow-lg"
+      style={{ position: "relative" }}
+    >
+      {/* Removed inline <style>; using Tailwind classes below */}
       <div className="flex flex-col gap-3">
         {/* Rows Control */}
         <div className="flex items-center gap-3">
@@ -83,14 +87,22 @@ export function CreatorControl({ dims, setDims }: CreatorControlProps) {
       </div>
 
       {/* Action Buttons */}
-      <div className="ml-auto flex items-center gap-2">
-        <button className="rounded-md bg-violet-500 px-4 py-2 font-semibold text-white transition-colors hover:bg-violet-400">
+      <div className="creator-control-actions ml-auto flex flex-row gap-2">
+        <button className="h-8 min-w-[70px] rounded-md bg-violet-500 px-3 py-1 text-[0.8rem] font-semibold text-white transition-colors hover:bg-violet-400">
           Reset
         </button>
-        <button className="rounded-md bg-emerald-500 px-4 py-2 font-semibold text-white transition-colors hover:bg-emerald-400">
+        <button className="h-8 min-w-[70px] rounded-md bg-emerald-500 px-3 py-1 text-[0.8rem] font-semibold text-white transition-colors hover:bg-emerald-400">
           Create
         </button>
       </div>
+      {/* Responsive: stack vertically on small screens */}
+      <style>{`
+        @media (max-width: 800px) {
+          .creator-control-actions {
+            flex-direction: column !important;
+          }
+        }
+      `}</style>
     </div>
   );
 }
diff --git a/client/src/components/creator/creator-items-select/creator-items-select.tsx b/client/src/components/creator/creator-items-select/creator-items-select.tsx
index 3f7194d..6d83358 100644
--- a/client/src/components/creator/creator-items-select/creator-items-select.tsx
+++ b/client/src/components/creator/creator-items-select/creator-items-select.tsx
@@ -14,34 +14,34 @@ export function CreatorItemsSelect() {
   const [selected, setSelected] = useState<string>(MENU_OPTIONS[0].key);
 
   return (
-    <div className="flex h-full flex-col rounded-lg bg-[#4b2a86] p-4 shadow-lg">
-      {/* Common width container for menu and select */}
-      <div className="flex h-full w-full max-w-full flex-col">
+    <div className="flex h-full w-full flex-col rounded-lg bg-[#4b2a86] p-4 shadow-lg">
+      <div className="flex h-full w-full flex-col">
         {/* Options Menu */}
         <div className="mb-4">
           <div
-            className="custom-scrollbar flex gap-2 overflow-x-auto"
+            className="custom-scrollbar flex gap-3 overflow-x-auto"
             style={{ WebkitOverflowScrolling: "touch" }}
           >
             {MENU_OPTIONS.map((option) => (
               <button
                 key={option.key}
                 onClick={() => setSelected(option.key)}
-                className={`rounded-md px-6 py-2 text-center text-sm font-semibold tracking-wide whitespace-nowrap transition-colors ${
+                className={`rounded-lg px-5 py-2 text-center font-mono text-base font-bold tracking-wide whitespace-nowrap transition-colors ${
                   selected === option.key
-                    ? "bg-amber-400 text-violet-900 shadow"
-                    : "bg-violet-500/70 text-amber-100 hover:bg-violet-400/80"
+                    ? "border border-amber-300 bg-transparent text-amber-300"
+                    : "border border-transparent bg-transparent text-gray-300 hover:text-white"
                 } `}
+                title={option.label}
               >
                 {option.label}
               </button>
             ))}
           </div>
         </div>
-        {/* Options Select (empty for now) */}
-        <div className="mx-auto flex min-h-0 w-full max-w-[calc(100vw-4rem)] flex-1 items-center justify-center rounded-lg bg-orange-300/80">
-          <span className="text-lg font-bold text-orange-900 opacity-60">
-            Options Select
+        {/* Show selected option label */}
+        <div className="flex min-h-0 w-full flex-1 items-center justify-center rounded-lg bg-[#3a2266] shadow-inner">
+          <span className="font-mono text-lg font-bold text-amber-100 opacity-90 drop-shadow">
+            {MENU_OPTIONS.find((option) => option.key === selected)?.label}
           </span>
         </div>
       </div>
diff --git a/client/src/components/creator/creator-name/creator-name.tsx b/client/src/components/creator/creator-name/creator-name.tsx
index a707ae9..a868f92 100644
--- a/client/src/components/creator/creator-name/creator-name.tsx
+++ b/client/src/components/creator/creator-name/creator-name.tsx
@@ -29,14 +29,17 @@ export function CreatorName({ levelName, setLevelName }: CreatorNameProps) {
   };
 
   return (
-    <div className="flex h-full flex-col items-start justify-center gap-2 rounded-lg bg-[#4b2a86] pt-5 pr-4 pb-3 pl-6 text-left shadow-lg">
+    <div className="flex h-full w-full flex-col items-start justify-center gap-2 rounded-lg bg-[#4b2a86] p-4 text-left shadow-lg">
       <label className="px-3 text-xs font-semibold tracking-wide whitespace-nowrap text-violet-200 uppercase">
         Level Name
       </label>
 
       {!isEditing ? (
         <div onClick={handleEdit} className="group w-full cursor-pointer">
-          <p className="flex h-9 items-center rounded-md border-2 border-transparent px-3 text-left text-base font-bold text-amber-300 transition-colors group-hover:text-amber-200">
+          <p
+            className="flex h-9 w-full items-center overflow-hidden rounded-md border-2 border-transparent px-3 text-left text-xs font-bold text-ellipsis whitespace-nowrap text-amber-300 transition-colors group-hover:text-amber-200 md:text-sm"
+            title={levelName || "Untitled Level"}
+          >
             {levelName || "Untitled Level"}
           </p>
         </div>
diff --git a/client/src/pages/creator.tsx b/client/src/pages/creator.tsx
index dc45345..828cde3 100644
--- a/client/src/pages/creator.tsx
+++ b/client/src/pages/creator.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 
 import { CreatorBoard } from "../components/creator/creator-board/creator-board";
 import { CreatorControl } from "../components/creator/creator-control/creator-control";
@@ -10,20 +10,20 @@ export function Creator() {
   const [dims, setDims] = useState<[number, number]>([7, 8]);
 
   return (
-    <div className="mx-4 mt-[2dvh] mb-[2dvh] flex w-full flex-col gap-[2dvh] text-center">
-      <div className="flex h-[14dvh] w-full items-stretch gap-4">
-        <div className="w-2/5">
+    <div className="mx-[2dvw] mt-[2dvh] mb-[2dvh] flex w-auto flex-col gap-[2dvh] text-center">
+      <div className="flex h-[14dvh] w-full items-stretch gap-[1dvw]">
+        <div className="w-[30dvw]">
           <CreatorName levelName={levelName} setLevelName={setLevelName} />
         </div>
-        <div className="w-3/5">
+        <div className="w-[64dvw]">
           <CreatorControl dims={dims} setDims={setDims} />
         </div>
       </div>
-      <div className="flex h-[80dvh] w-full items-stretch gap-4">
-        <div className="w-2/5">
+      <div className="flex h-[80dvh] w-full items-stretch gap-[1dvw]">
+        <div className="w-[30dvw]">
           <CreatorItemsSelect />
         </div>
-        <div className="w-3/5">
+        <div className="w-[64dvw]">
           <CreatorBoard dims={dims} />
         </div>
       </div>

From 10f7889bb28a1b894aff3342b783b6f2bb06bbe9 Mon Sep 17 00:00:00 2001
From: 24bartixx <jestgitbartix@gmail.com>
Date: Sun, 29 Mar 2026 23:55:22 +0200
Subject: [PATCH 2/2] chore: remove unncessary comments

---
 .../creator/creator-control/creator-control.tsx  | 16 ++--------------
 1 file changed, 2 insertions(+), 14 deletions(-)

diff --git a/client/src/components/creator/creator-control/creator-control.tsx b/client/src/components/creator/creator-control/creator-control.tsx
index 31b89f9..15dbcbd 100644
--- a/client/src/components/creator/creator-control/creator-control.tsx
+++ b/client/src/components/creator/creator-control/creator-control.tsx
@@ -27,11 +27,7 @@ export function CreatorControl({ dims, setDims }: CreatorControlProps) {
   const isColsMax = cols >= MAX_DIM;
 
   return (
-    <div
-      className="flex h-full w-full items-center gap-6 rounded-lg bg-[#4b2a86] p-4 shadow-lg"
-      style={{ position: "relative" }}
-    >
-      {/* Removed inline <style>; using Tailwind classes below */}
+    <div className="relative flex h-full w-full items-center gap-6 rounded-lg bg-[#4b2a86] p-4 shadow-lg">
       <div className="flex flex-col gap-3">
         {/* Rows Control */}
         <div className="flex items-center gap-3">
@@ -87,7 +83,7 @@ export function CreatorControl({ dims, setDims }: CreatorControlProps) {
       </div>
 
       {/* Action Buttons */}
-      <div className="creator-control-actions ml-auto flex flex-row gap-2">
+      <div className="creator-control-actions ml-auto flex flex-col gap-2 md:flex-row">
         <button className="h-8 min-w-[70px] rounded-md bg-violet-500 px-3 py-1 text-[0.8rem] font-semibold text-white transition-colors hover:bg-violet-400">
           Reset
         </button>
@@ -95,14 +91,6 @@ export function CreatorControl({ dims, setDims }: CreatorControlProps) {
           Create
         </button>
       </div>
-      {/* Responsive: stack vertically on small screens */}
-      <style>{`
-        @media (max-width: 800px) {
-          .creator-control-actions {
-            flex-direction: column !important;
-          }
-        }
-      `}</style>
     </div>
   );
 }