From bf78a5415145d3377ad619f7e7012fb1f3fc4cfc Mon Sep 17 00:00:00 2001
From: jaipaljadeja <jadejajaipal5@gmail.com>
Date: Mon, 15 Apr 2024 13:28:48 +0530
Subject: [PATCH] chore: style and mobile ui improvements

---
 components/Editor/EditorControls.tsx   |  4 ++--
 components/Editor/EditorFooter.tsx     |  2 +-
 components/Editor/index.tsx            | 14 ++++++++------
 components/KBar/Button.tsx             |  2 +-
 components/ThemeSelector.tsx           |  2 +-
 components/ToggleFullScreen.tsx        |  1 +
 components/ToggleThreeColumnLayout.tsx |  1 +
 components/Tracer/index.tsx            |  2 +-
 components/layouts/Nav.tsx             |  2 +-
 9 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/components/Editor/EditorControls.tsx b/components/Editor/EditorControls.tsx
index 8d15b9b..17c013b 100644
--- a/components/Editor/EditorControls.tsx
+++ b/components/Editor/EditorControls.tsx
@@ -107,11 +107,11 @@ const EditorControls = ({
           readOnly={isCompileDisabled}
           value={programArguments}
           placeholder={`Program arguments`}
-          className={cn('max-w-64 border bg-gray-200 dark:bg-gray-800 ', {
+          className={cn('max-w-64 border bg-gray-200 dark:bg-gray-800', {
             'dark:border-gray-800 border-gray-200': areProgramArgumentsValid,
             'border-red-500': !areProgramArgumentsValid,
           })}
-          inputClassName={cn({
+          inputClassName={cn('text-xs md:text-sm', {
             'text-red-500': !areProgramArgumentsValid,
           })}
         />
diff --git a/components/Editor/EditorFooter.tsx b/components/Editor/EditorFooter.tsx
index 39bdd32..0c78c94 100644
--- a/components/Editor/EditorFooter.tsx
+++ b/components/Editor/EditorFooter.tsx
@@ -14,7 +14,7 @@ function EditorFooter() {
   return (
     <div
       className={cn(
-        'px-5 bg-gray-100 dark:bg-black-700 border-t border-gray-200 dark:border-black-500 text-xs h-[42px] items-center text-gray-600 ml-auto flex justify-between',
+        'px-5 bg-gray-100 dark:bg-black-700 border border-gray-200 dark:border-black-500 text-xs h-[42px] items-center text-gray-600 ml-auto flex justify-between',
         !isFullScreen && 'rounded-b-lg',
       )}
     >
diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
index 64b8353..fa29e95 100644
--- a/components/Editor/index.tsx
+++ b/components/Editor/index.tsx
@@ -333,14 +333,16 @@ const Editor = ({ readOnly = false }: Props) => {
         )}
       >
         <div
-          className="flex flex-col md:flex-row"
-          style={{
-            height: isFullScreen ? 'calc(100vh - 42px)' : '70vh',
-          }}
+          className={cn(
+            'flex flex-col md:flex-row',
+            isFullScreen
+              ? 'md:h-[calc(100vh_-_42px)]'
+              : 'md:h-[70vh] border-t border-l border-r rounded-t-lg border-gray-200 dark:border-black-500',
+          )}
         >
           <div
             className={cn(
-              'w-full md:w-1/2 flex flex-col',
+              'w-full md:w-1/2 flex flex-col h-[50vh] md:h-auto',
               isThreeColumnLayout && 'md:w-1/3',
             )}
           >
@@ -426,7 +428,7 @@ const Editor = ({ readOnly = false }: Props) => {
 
           <div
             className={cn(
-              'w-full md:w-1/2 flex flex-col justify-between',
+              'w-full md:w-1/2 flex flex-col justify-between h-[50vh] md:h-auto',
               isThreeColumnLayout && 'md:w-1/3',
             )}
           >
diff --git a/components/KBar/Button.tsx b/components/KBar/Button.tsx
index e41ea3e..869c559 100644
--- a/components/KBar/Button.tsx
+++ b/components/KBar/Button.tsx
@@ -23,7 +23,7 @@ const KBarButton = () => {
     <Button
       size="xs"
       onClick={query.toggle}
-      className="mx-4 py-1 px-2 font-medium"
+      className="mx-2 md:mx-4 py-1 px-2 font-medium"
       transparent
       outline
       padded={false}
diff --git a/components/ThemeSelector.tsx b/components/ThemeSelector.tsx
index 9db78ee..33db37c 100644
--- a/components/ThemeSelector.tsx
+++ b/components/ThemeSelector.tsx
@@ -59,7 +59,7 @@ const ThemeSelector = () => {
   }
 
   return (
-    <Button transparent onClick={handleThemChange}>
+    <Button transparent onClick={handleThemChange} className="px-2 md:px-4">
       <Contrast2Icon
         size={16}
         className="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
diff --git a/components/ToggleFullScreen.tsx b/components/ToggleFullScreen.tsx
index 5252b41..1014508 100644
--- a/components/ToggleFullScreen.tsx
+++ b/components/ToggleFullScreen.tsx
@@ -54,6 +54,7 @@ const ToggleFullScreen = () => {
       onClick={handleToggleFullScreen}
       tooltip={`${isFullScreen ? 'Exit' : 'Enter'} Full Screen`}
       tooltipId="toggle-fullscreen"
+      className="px-2 md:px-4"
     >
       <FullScreenIcon
         size={16}
diff --git a/components/ToggleThreeColumnLayout.tsx b/components/ToggleThreeColumnLayout.tsx
index 99a94ee..348e4ac 100644
--- a/components/ToggleThreeColumnLayout.tsx
+++ b/components/ToggleThreeColumnLayout.tsx
@@ -47,6 +47,7 @@ const ToggleThreeColumnLayout = () => {
         isThreeColumnLayout ? 'Disable' : 'Enable'
       } Three Column Layout`}
       tooltipId="toggle-threeColumnLayout"
+      className="hidden md:block"
     >
       <ColumnLayoutIcon
         size={16}
diff --git a/components/Tracer/index.tsx b/components/Tracer/index.tsx
index d60f067..7aef6e4 100644
--- a/components/Tracer/index.tsx
+++ b/components/Tracer/index.tsx
@@ -343,7 +343,7 @@ function DebugInfoTab({
             <dd className="font-mono mb-2">
               <table className="w-full font-mono text-tiny border border-gray-300 dark:border-black-500">
                 <thead>
-                  <tr className="text-left sticky top-0 bg-gray-50 dark:bg-black-600 text-gray-400 dark:text-gray-600 border-b border-gray-300 dark:border-black-500">
+                  <tr className="text-left sticky z-[1] top-0 bg-gray-50 dark:bg-black-600 text-gray-400 dark:text-gray-600 border-b border-gray-300 dark:border-black-500">
                     <th className="py-1 px-2 font-thin min-w-16">FP</th>
                     <th className="py-1 px-2 font-thin  whitespace-nowrap w-16">
                       CALL PC
diff --git a/components/layouts/Nav.tsx b/components/layouts/Nav.tsx
index 9c03524..5788509 100644
--- a/components/layouts/Nav.tsx
+++ b/components/layouts/Nav.tsx
@@ -34,7 +34,7 @@ const Nav = () => {
 
           <div className="items-center ml-auto flex">
             <KBarButton />
-            <NavLink href={GITHUB_REPO_URL} external>
+            <NavLink href={GITHUB_REPO_URL} external className="mx-2 md:mx-4">
               GitHub
             </NavLink>
             <ToggleFullScreen />