Fixes chopping (Settings Covering Screen)

Bug fix where the settings icon was covering the entire game-container, caused by two different elements having the 'grid' class name, changed to game-grid instead.

Author: MaximilianAdF

app/puzzles/chopping/Chopping.tsx

@@ -153,7 +153,7 @@ const Chopping: FC = () => {
                 <NPSettingsRange
                     title={"Number of letters"}
                     min={13}
-                    max={30}
+                    max={18}
                     value={settingsNumLetters}
                     setValue={setSettingsNumLetters}
                 />
@@ -182,10 +182,10 @@ const Chopping: FC = () => {
             statusMessage={getStatusMessage(gameStatus)}
             settings={settings}
         >
-            <div className='grid'>
+            <div className='game-grid'>
                 {/* Dynamically create grid rows based on numLetters and defaultGridCols */}
                 {Array.from({ length: Math.ceil(numLetters / defaultGridCols) }).map((_, rowIndex) => (
-                    <div key={rowIndex} className='grid-row' style={{ gridTemplateColumns: `repeat(${Math.min(numLetters - rowIndex * defaultGridCols, defaultGridCols)}, min-content)` }}>
+                    <div key={rowIndex} className='game-grid-row' style={{ gridTemplateColumns: `repeat(${Math.min(numLetters - rowIndex * defaultGridCols, defaultGridCols)}, min-content)` }}>
 
                         {/* Create grid columns within each row */}
                         {Array.from({ length: defaultGridCols }).map((_, colIndex) => {

public/Chopping/Chopping.css

@@ -8,15 +8,15 @@
   margin-top: 10%;
 }
 
-.grid {
+.game-grid {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   grid-template-rows: repeat(var(--grid-rows), 1fr);
   gap: 0.5rem;
   z-index: 1;
 }
 
-.grid-row {
+.game-grid-row {
   display: grid;
   justify-content: center;
   grid-template-columns: repeat(var(--grid-columns), 1fr);