📱 style: created a better layout for mobile devices

Author: orodrigojose

src/App.jsx

@@ -10,7 +10,10 @@ function App() {
   useEffect(() => inputRef.current.focus(), []);
 
   return (
-    <div className="flex flex-row w-screen h-screen" onClick={() => inputRef.current.focus()}>
+    <div
+      className="flex flex-col w-screen h-screen sm:flex-row"
+      onClick={() => inputRef.current.focus()}
+    >
       <Terminal
         inputRef={inputRef}
         avaliableCommands={avaliableCommands}

src/shared/components/Pomodoro.jsx

@@ -42,7 +42,7 @@ export default function Pomodoro({ customMinutes = 1, customSeconds = 0 }) {
   const timerSeconds = parseTime(seconds);
 
   return (
-    <section className="w-2/5 h-full flex flex-col justify-center items-center bg-zinc-900 text-slate-200 border-purple-800 border-l-2">
+    <section className="sm:w-2/5 w-screen h-full flex flex-col justify-center items-center bg-zinc-900 text-slate-200 border-purple-800 border-t-2 sm:border-l-2 sm:border-t-0">
       {breakTime ? (
         <div>
           <p className="font-Ubuntu text-xs text-slate-300">

src/shared/components/StatusBar.jsx

@@ -2,7 +2,7 @@ import { BsPauseCircle, BsClockFill, BsCheck2Square } from "react-icons/bs";
 
 export default function StatusBar({ paused, breakTime }) {
   return (
-    <section className="bg-slate-700 w-2/5 fixed bottom-0 flex">
+    <section className="bg-slate-700 sm:w-2/5 w-screen fixed bottom-0 flex">
       <div
         className={`flex items-center gap-1 align-center text-slate-200 text-sm font-RobotoMono pl-2 pr-4 bg-purple-600 font-medium ${
           !breakTime ? "rounded-r-xl" : null

src/shared/components/Terminal.jsx

@@ -48,7 +48,7 @@ export default function Terminal({ inputRef, avaliableCommands, PS1 }) {
   };
 
   return (
-    <div className="whitespace-pre-line text-white bg-neutral-900 w-3/5 h-screen p-2 overflow-y-scroll no-scrollbar">
+    <div className="whitespace-pre-line text-white bg-neutral-900 sm:w-3/5 w-screen h-screen p-2 overflow-y-scroll no-scrollbar">
       <section className="text-sm font-RobotoMono font-medium">
         {output.map((data, index) => (
           <div key={index}>

tailwind.config.cjs

@@ -8,6 +8,13 @@ module.exports = {
         Ubuntu: ["Ubuntu", "sans-serif"],
       },
     },
+    screens: {
+      sm: "640px",
+      md: "768px",
+      lg: "1024px",
+      xl: "1280px",
+      "2xl": "1536px",
+    },
   },
   plugins: [],
 };