Align main body vertically on smaller window sizes EXXETA#205 solved

sanwalsulehri · Jan 29, 2025 · 35bd295 · 35bd295
1 parent 89b4301
commit 35bd295
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 4 deletions.
diff --git a/src/renderer/components/mainWindow/MainBody.tsx b/src/renderer/components/mainWindow/MainBody.tsx
@@ -3,9 +3,9 @@ import { OutputTabs } from '@/components/mainWindow/bodyTabs/OutputTabs';
 
 export function MainBody() {
   return (
-    <div className={'flex-1 flex flex-column gap-6'}>
+    <div className={'xl:flex-1 overflow-x-hidden xl:flex xl:flex-column gap-6'}>
       <InputTabs className="rounded-sm m-0 flex-1" />
-      <OutputTabs className="rounded-sm m-0 flex-1" />
+      <OutputTabs className="rounded-sm xl:m-0 mt-6 flex-1" />
     </div>
   );
 }
diff --git a/src/renderer/components/mainWindow/bodyTabs/InputTabs/index.tsx b/src/renderer/components/mainWindow/bodyTabs/InputTabs/index.tsx
@@ -141,7 +141,7 @@ export function InputTabs(props: InputTabsProps) {
       </TabsList>
 
       <TabsContent value="body">
-        <div className={'h-full relative'}>
+        <div className={'xl:h-full min-h-[50vh] relative'}>
           <div className={'absolute top-[16px] right-[16px] left-[16px] z-10'}>
             <div className={'flex justify-end'}>
               {renderSelectLanguage()}

diff --git a/src/renderer/components/mainWindow/bodyTabs/OutputTabs.tsx b/src/renderer/components/mainWindow/bodyTabs/OutputTabs.tsx
@@ -73,7 +73,7 @@ export function OutputTabs(props: OutputTabsProps) {
       </TabsList>
 
       <TabsContent value="body">
-        <div className={'h-full'}>
+        <div className={'xl:h-full min-h-[50vh]'}>
           <Editor
             language={mimeType}
             theme="vs-dark" /* TODO: apply theme from settings */

diff --git a/src/renderer/styles/tailwind.css b/src/renderer/styles/tailwind.css
@@ -118,3 +118,8 @@
     font-feature-settings: "rlig" 1, "calt" 1;
   }
 }
+
+
+::-webkit-scrollbar{
+  display: none;
+}