From e38062b4e06bb1040c0e2b7b8dafe831f46dd906 Mon Sep 17 00:00:00 2001
From: webbrain-one <295484252+webbrain-one@users.noreply.github.com>
Date: Sun, 9 Aug 2026 08:21:37 +0300
Subject: [PATCH] Fix mobile responsiveness for converter tools

Adjust margins and enable flex-wrap to properly render the
HTML to JSX, JSON to YAML, and UNIX time converters on
mobile viewports.

Fixes #66
---
 components/Tools/Converters/HtmlToJsx/index.tsx | 15 +++++++--------
 components/Tools/Converters/JsonYaml/index.tsx  | 16 ++++++++--------
 components/Tools/Converters/UnixTime/index.tsx  |  8 ++++----
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/components/Tools/Converters/HtmlToJsx/index.tsx b/components/Tools/Converters/HtmlToJsx/index.tsx
index d20c996..3ed268b 100644
--- a/components/Tools/Converters/HtmlToJsx/index.tsx
+++ b/components/Tools/Converters/HtmlToJsx/index.tsx
@@ -1,4 +1,4 @@
-import { Flex, Box, Button, Spacer, Text } from "@chakra-ui/react";
+import { Flex, Box, Button, Text } from "@chakra-ui/react";
 import { Editor, EditorChange } from "codemirror";
 import { Controlled } from "react-codemirror2";
 import { useState } from "react";
@@ -23,9 +23,9 @@ const HtmlToJsx = () => {
 
   return (
     <div>
-      <Flex>
-        <Box w="45%">
-          <Text fontSize="3xl" mb="10px" ml="40%">
+      <Flex flexWrap="wrap" w="full">
+        <Box w={{ base: "full", md: "45%" }} flexBasis={{ base: "100%", md: "45%" }} mr={{ base: 0, md: 4 }} mb={{ base: 4, md: 0 }}>
+          <Text fontSize="3xl" mb="10px" textAlign="center">
             Html
           </Text>
           <Controlled
@@ -38,9 +38,8 @@ const HtmlToJsx = () => {
             }}
           />
         </Box>
-        <Spacer />
-        <Box w="45%">
-          <Text fontSize="3xl" mb="10px" ml="45%">
+        <Box w={{ base: "full", md: "45%" }} flexBasis={{ base: "100%", md: "45%" }}>
+          <Text fontSize="3xl" mb="10px" textAlign="center">
             JSX
           </Text>
           <Controlled
@@ -55,7 +54,7 @@ const HtmlToJsx = () => {
           />
         </Box>
       </Flex>
-      <Button ml="45%" mt="10%" onClick={convert}>
+      <Button w="full" mt={4} onClick={convert}>
         Convert To Jsx
       </Button>
     </div>
diff --git a/components/Tools/Converters/JsonYaml/index.tsx b/components/Tools/Converters/JsonYaml/index.tsx
index b5fb2a8..376d7a0 100644
--- a/components/Tools/Converters/JsonYaml/index.tsx
+++ b/components/Tools/Converters/JsonYaml/index.tsx
@@ -57,11 +57,11 @@ const JsonYaml = () => {
 
   return (
     <VStack spacing="5">
-      <HStack spacing="5" w="100%" justifyContent={"center"}>
+      <Flex flexWrap="wrap" w="full" justifyContent="center" spacing={4}>
         {/* Input Box */}
-        <Box flexGrow="1">
-          <Flex justifyContent={"space-between"}>
-            <Text fontSize="2xl" mb="10px" ml="45%">
+        <Box w={{ base: "full", md: "auto" }} flexBasis={{ base: "100%", md: "auto" }} flexGrow="1">
+          <Flex justifyContent="space-between" flexWrap="wrap" mb={2}>
+            <Text fontSize="2xl" ml={{ base: 0, md: "45%" }}>
               Input
             </Text>
             <HStack spacing="2">
@@ -83,9 +83,9 @@ const JsonYaml = () => {
           />
         </Box>
         {/* Output Box */}
-        <Box flexGrow="1">
-          <Flex justifyContent={"space-between"}>
-            <Text fontSize="2xl" mb="10px" ml="45%">
+        <Box w={{ base: "full", md: "auto" }} flexBasis={{ base: "100%", md: "auto" }} flexGrow="1">
+          <Flex justifyContent="space-between" flexWrap="wrap" mb={2}>
+            <Text fontSize="2xl" ml={{ base: 0, md: "45%" }}>
               Output
             </Text>
             <HStack spacing="2">
@@ -108,7 +108,7 @@ const JsonYaml = () => {
             }}
           />
         </Box>
-      </HStack>
+      </Flex>
 
       {/* Configuration part */}
       <Flex w="100%">
diff --git a/components/Tools/Converters/UnixTime/index.tsx b/components/Tools/Converters/UnixTime/index.tsx
index e56dded..e096652 100644
--- a/components/Tools/Converters/UnixTime/index.tsx
+++ b/components/Tools/Converters/UnixTime/index.tsx
@@ -1,6 +1,6 @@
 import {
   VStack,
-  HStack,
+  Flex,
   Table,
   Tbody,
   Tr,
@@ -141,8 +141,8 @@ const UnixTime = () => {
       <VStack w="100%" align="left">
         <FormControl as="fieldset">
           <FormLabel as="legend">From Date</FormLabel>
-          <HStack spacing="2" marginLeft={"auto"}>
-            <VStack aligh="left">
+          <Flex flexWrap="wrap" justifyContent="center" spacing={2} w="full">
+            <VStack align="left">
               <FormLabel as="legend" mb={0}>
                 Year
               </FormLabel>
@@ -226,7 +226,7 @@ const UnixTime = () => {
                 <NumberInputField />
               </NumberInput>
             </VStack>
-          </HStack>
+          </Flex>
         </FormControl>
         {/* Result table */}
         <Table