style: refactor components and improve print layout

* Class Naming: Standardized button classes with -button suffixes and simplified wrapper classes
* Step Numbering: Added explicit span wrappers for step numbers in Frame.tsx
* Spacing Adjustments: Tightened margins and gaps in Frame.css and Step.css
* Print Styles: Updated Guide.css to define @page size as A4 and simplified .frame selectors
* Code Cleanup: Minor whitespace and formatting adjustments in App.css and Step.tsx

src/components/frame/Frame.tsx

@@ -9,7 +9,7 @@ export default function Frame({ frame } : { frame: FrameType }) {
       <ol className="steps">
         {frame.steps.map((step, stepIndex) => (
           <li key={stepIndex} className="step">
-            {step.text}
+            <span>{stepIndex + 1}.</span>{step.text}
           </li>
         ))}
       </ol>

src/features/guides/components/Frame.css

@@ -19,14 +19,14 @@
     gap: var(--size-md);
 }
 
-.frame .buttons button {
+.frame button {
     padding: var(--size-sm) var(--size-md);
 }
 
-.frame .buttons .remove {
+.frame .remove-button {
     margin-left: auto;
 }
 
 .frame ol {
-    margin-left: var(--size-md);
+    margin-left: var(--size-sm);
 }

src/features/guides/components/Frame.tsx

@@ -36,21 +36,21 @@ export default function Frame({
       <div className="buttons">
         <button
           type="button"
-          className="up"
+          className="up-button"
           onClick={() => reOrder(frameIndex, frameIndex - 1)}
         >
           Up
         </button>
         <button
           type="button"
-          className="down"
+          className="down-button"
           onClick={() => reOrder(frameIndex, frameIndex + 1)}
         >
           Down
         </button>
         <button
           type="button"
-          className="remove"
+          className="remove-button"
           onClick={() => onRemove(frame.id)}
         >
           Remove Frame
@@ -67,7 +67,7 @@ export default function Frame({
       <img src={objectUrl} alt={frame.title} />
       <button
         type="button"
-        className="add-step"
+        className="add-step-button"
         onClick={() => addStep(frame.id)}
       >
         Add Step

src/features/guides/components/Step.css

@@ -1,8 +1,11 @@
 .step {
     display: flex;
-    gap: var(--size-md);
+    gap: var(--size-xs);
+}
+.step span {
+    font-weight: bold;
+    color:#555;
 }
-
 .step label {
     flex-direction: row;
     align-items: center;

src/features/guides/components/Step.tsx

@@ -22,7 +22,7 @@ export default function Step({
           onChange={(e) => updateStep(step.id, e.target.value)}
         />
       </label>
-      <button type="button" onClick={() => removeStep(step.id)}>
+      <button type="button" className="remove-step-button" onClick={() => removeStep(step.id)}>
         Remove Step
       </button>
     </li>

src/features/guides/routes/Guide.css

@@ -4,14 +4,15 @@ main:has(.guide) {
     justify-content: center;
 }
 
-.guide__frames {
+.frames {
     display: flex;
     flex-direction: column;
-    gap: var(--size-xl);
+    gap: 2rem;
 }
 
 .guide {
     max-width: 600px;
+
     .delete-button {
         position: absolute;
         bottom: var(--size-md);
@@ -29,28 +30,31 @@ main:has(.guide) {
         top: var(--size-md);
         right: var(--size-md);
     }
-
 }
+
 @media print {
     main:has(.guide) {
         padding: 0rem;
         justify-content: flex-start;
     }
 
-    .guide__frames {
-        display: block;
-    }
 
-    .guide__frame {
+
+    .frame {
         position: relative;
         break-inside: avoid;
         page-break-inside: avoid;
         background-color: var(--color-bg-panel);
-        margin: var(--size-lg) 0;
+
     }
 
-    .guide__frame img {
+    .frame img {
         max-width: 100%;
-        max-height: 100px;
+        max-height: 300px;
     }
 }
+
+@page {
+    size: A4;
+    margin: 2rem;
+}

src/features/guides/routes/Guide.tsx

@@ -19,7 +19,7 @@ export default function Guide() {
 
       <hr />
 
-      <div className="guide__frames">
+      <div className="frames">
         {guide.frames.map((frame, index) => (
           <Frame key={index} frame={frame} />
         ))}

src/styles/App.css

@@ -78,6 +78,8 @@ ul {
     list-style: none;
 }
 
+
+
 a,
 input,
 button,
@@ -119,10 +121,12 @@ textarea,
     border-radius: var(--radius);
     padding: var(--size-sm);
 }
+
 textarea {
     resize: none;
     height: 5rem;
 }
+
 hr {
     margin: var(--size-md) 0;
     border: none;
@@ -130,9 +134,11 @@ hr {
     background-color: var(--color-bg-sidebar);
     border-radius: var(--radius);
 }
+
 :focus-visible {
     border: 2px solid var(--color-accent);
 }
+
 @media print {
     header,
     footer,