chore: variant at top

src/components/RoadCard/TallBadgeTab.tsx

@@ -28,10 +28,33 @@ export function TallBadgeTab({
 
   return (
     <div className="sm:grid sm:grid-cols-5 sm:gap-6">
+      <div className="block sm:hidden mb-6">
+          <span className="text-xs uppercase leading-none text-gray-400">
+            Variant
+          </span>
+
+          <div className="mt-2 flex items-center gap-2">
+            <button
+              className={`flex h-7 items-center justify-center rounded-lg border border-gray-200 px-3 text-sm leading-none hover:opacity-80 ${selectedVariant === 'dark' && 'border-gray-300 bg-gray-100'
+                }`}
+              onClick={() => setSelectedVariant('dark')}
+            >
+              Dark
+            </button>
+
+            <button
+              className={`flex h-7 items-center justify-center rounded-lg border border-gray-200 px-3 text-sm leading-none hover:opacity-80 ${selectedVariant === 'light' && 'border-gray-300 bg-gray-100'
+                }`}
+              onClick={() => setSelectedVariant('light')}
+            >
+              Light
+            </button>
+          </div>
+        </div>
       <LongBadge badgeUrl={badgeUrl} />
 
       <div className="mt-6 sm:col-span-3 sm:mt-0">
-        <div>
+        <div className="hidden sm:block">
           <span className="text-xs uppercase leading-none text-gray-400">
             Variant
           </span>
@@ -55,7 +78,7 @@ export function TallBadgeTab({
           </div>
         </div>
 
-        <div className="mt-4 flex flex-col gap-3">
+        <div className="sm:mt-4 flex flex-col gap-3">
           <Editor title={'HTML'} text={textareaContent} />
           <Editor title={'Markdown'} text={markdownSnippet} />
         </div>