Fixed bugs

fwt/components/Column/Column.sass

@@ -1,4 +1,4 @@
-.top
+.column-top
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -6,7 +6,7 @@
   align-items: center
   align-content: center
 
-.center
+.column-center
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -14,7 +14,7 @@
   align-items: center
   align-content: center
 
-.right
+.column-right
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -22,7 +22,7 @@
   align-items: center
   align-content: center
 
-.split
+.column-split
   display: flex
   flex-direction: column
   flex-wrap: wrap
@@ -30,7 +30,7 @@
   align-items: center
   align-content: center
 
-.spaced
+.column-spaced
   display: flex
   flex-direction: column
   flex-wrap: wrap

fwt/components/Column/Column.tsx

@@ -3,16 +3,16 @@ import './Column.sass'
 
 interface Props {
   children: JSXElement
-  content: 'top' | 'center' | 'right' | 'split' | 'spaced'
+  content?: 'top' | 'center' | 'right' | 'split' | 'spaced'
   gap?: number
 }
 
 export default (props: Props) => {
   return (
     <>
-      <div class={props.content} style={`gap: ${props.gap}rem`}>
+      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
         {props.children}
-      </div>
+      </section>
     </>
   )
 }

fwt/components/Row/Row.sass

@@ -1,4 +1,4 @@
-.left
+.row-left
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -6,7 +6,7 @@
   align-items: center
   align-content: center
 
-.center
+.row-center
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -14,7 +14,7 @@
   align-items: center
   align-content: center
 
-.right
+.row-right
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -22,7 +22,7 @@
   align-items: center
   align-content: center
 
-.split
+.row-split
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -30,7 +30,7 @@
   align-items: center
   align-content: center
 
-.spaced
+.row-spaced
   display: flex
   flex-direction: row
   flex-wrap: wrap
@@ -38,7 +38,7 @@
   align-items: center
   align-content: center
 
-.even
+.row-even
   display: flex
   flex-direction: row
   flex-wrap: wrap

fwt/components/Row/Row.tsx

@@ -3,7 +3,7 @@ import { Show, type JSXElement } from 'solid-js'
 
 interface Props {
   children: JSXElement
-  content: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
+  content?: 'left' | 'center' | 'right' | 'split' | 'spaced' | 'even'
   gap?: number
 }
 
@@ -11,13 +11,13 @@ export default (props: Props) => {
   return (
     <>
       <Show when={props.gap}>
-        <div class={props.content} style={`gap: ${props.gap}rem`}>
+        <section class={`row-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
           {props.children}
-        </div>
+        </section>
       </Show>
 
       <Show when={!props.gap}>
-        <div class={props.content}>{props.children}</div>
+        <section class={`row-${props.content || 'center'}`}>{props.children}</section>
       </Show>
     </>
   )