chore: style and mobile ui improvements

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,
           })}
         />

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',
       )}
     >

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',
             )}
           >

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}

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"

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}

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}

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

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 />