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">
-            <span>{stepIndex + 1}.</span>{step.text}
+            {step.text}
           </li>
         ))}
       </ol>

src/features/guides/components/Frame.css

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

src/features/guides/components/Frame.tsx

@@ -36,21 +36,21 @@ export default function Frame({
       <div className="buttons">
         <button
           type="button"
-          className="up-button"
+          className="up"
           onClick={() => reOrder(frameIndex, frameIndex - 1)}
         >
           Up
         </button>
         <button
           type="button"
-          className="down-button"
+          className="down"
           onClick={() => reOrder(frameIndex, frameIndex + 1)}
         >
           Down
         </button>
         <button
           type="button"
-          className="remove-button"
+          className="remove"
           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-button"
+        className="add-step"
         onClick={() => addStep(frame.id)}
       >
         Add Step

src/features/guides/components/Step.css

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

src/features/guides/components/Step.tsx

@@ -9,7 +9,7 @@ export default function Step({
 }: {
   step: StepType;
   removeStep: (stepId: string) => void;
-  updateStep: (stepId: string, text: string) => void ;
+  updateStep: (stepId: string, text: string) => void;
   index: number;
 }) {
   return (
@@ -22,7 +22,7 @@ export default function Step({
           onChange={(e) => updateStep(step.id, e.target.value)}
         />
       </label>
-      <button type="button" className="remove-step-button" onClick={() => removeStep(step.id)}>
+      <button type="button" onClick={() => removeStep(step.id)}>
         Remove Step
       </button>
     </li>

src/features/guides/routes/Guide.css

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

src/features/guides/routes/Guide.tsx

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

src/styles/App.css

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