Fix loopy submission format and pattern layout

frontend/src/components/PuzzleEditor.tsx

@@ -803,8 +803,8 @@ function PatternEditor({ boardAscii, onChange }: Omit<Props, "puzzleType">) {
     <div className="editor-stack">
       <div className="puzzle-note">Every cell starts white. Click a square to toggle it between white and filled black.</div>
       <div className="pattern-layout">
-        <div className="pattern-top-clues" style={{ gridTemplateColumns: `92px repeat(${columnClues.length}, 46px)` }}>
-          <div />
+        <div className="pattern-top-spacer" />
+        <div className="pattern-top-clues" style={{ gridTemplateColumns: `repeat(${columnClues.length}, 46px)` }}>
           {columnClues.map((column, index) => (
             <div
               key={`column-${index}`}
@@ -822,35 +822,36 @@ function PatternEditor({ boardAscii, onChange }: Omit<Props, "puzzleType">) {
             </div>
           ))}
         </div>
-        <div className="pattern-grid">
-          {template.rows.map((row, rowIndex) => (
-            <div key={rowIndex} className="pattern-row">
-              <div className="pattern-clue pattern-row-clue">
-                {row.prefix
-                  .trim()
-                  .split(/\s+/)
-                  .filter(Boolean)
-                  .map((clue, clueIndex) => (
-                    <span key={`${rowIndex}-${clueIndex}`} className="pattern-clue-pill">
-                      {clue}
-                    </span>
-                  ))}
-              </div>
-              <div className="board-grid pattern-board" style={{ gridTemplateColumns: `repeat(${row.cells.length}, 46px)` }}>
-                {row.cells.map((cell, cellIndex) => (
-                  <button
-                    key={`${rowIndex}-${cellIndex}`}
-                    type="button"
-                    className={`board-square ${cell === "##" ? "fill" : "empty"}`}
-                    onClick={() => cycle(rowIndex, cellIndex)}
-                  >
-                    {cell === "##" ? "■" : ""}
-                  </button>
+        {template.rows.map((row, rowIndex) => (
+          <div key={`row-wrap-${rowIndex}`} className="pattern-row-pair">
+            <div className="pattern-clue pattern-row-clue">
+              {row.prefix
+                .trim()
+                .split(/\s+/)
+                .filter(Boolean)
+                .map((clue, clueIndex) => (
+                  <span key={`${rowIndex}-${clueIndex}`} className="pattern-clue-pill">
+                    {clue}
+                  </span>
                 ))}
-              </div>
             </div>
-          ))}
-        </div>
+            <div
+              className="board-grid pattern-board"
+              style={{ gridTemplateColumns: `repeat(${row.cells.length}, 46px)` }}
+            >
+              {row.cells.map((cell, cellIndex) => (
+                <button
+                  key={`${rowIndex}-${cellIndex}`}
+                  type="button"
+                  className={`board-square ${cell === "##" ? "fill" : "empty"}`}
+                  onClick={() => cycle(rowIndex, cellIndex)}
+                >
+                  {cell === "##" ? "■" : ""}
+                </button>
+              ))}
+            </div>
+          </div>
+        ))}
       </div>
     </div>
   );

frontend/src/index.css

@@ -410,13 +410,25 @@ a {
 
 .pattern-layout {
   display: grid;
-  gap: 16px;
+  grid-template-columns: 92px max-content;
+  gap: 12px;
+  align-items: end;
+  width: max-content;
+}
+
+.pattern-top-spacer {
+  min-height: 1px;
 }
 
 .pattern-top-clues {
   display: grid;
-  gap: 12px;
+  gap: 2px;
   align-items: end;
+  justify-content: start;
+}
+
+.pattern-row-pair {
+  display: contents;
 }
 
 .pattern-column-stack {
@@ -428,18 +440,7 @@ a {
 
 .pattern-board {
   padding: 10px;
-}
-
-.pattern-grid {
-  display: grid;
-  gap: 8px;
-}
-
-.pattern-row {
-  display: grid;
-  grid-template-columns: 92px auto;
-  gap: 12px;
-  align-items: center;
+  width: max-content;
 }
 
 .pattern-clue {