fix: unable to scroll all columns in SQL view #26

Scroll for the table in SQL View
dblens · Dec 5, 2021 · 1037978 · 1037978
2 parents 33e4b1f + 9656f2d
commit 1037978
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 11 deletions.
diff --git a/src/App.global.css b/src/App.global.css
@@ -58,10 +58,11 @@ a:hover {
   height: calc(100vh - 25px);
   width: calc(100vw - 300px);
 }
-.sql-table-wrapper {
+.sql-dataview-wrapper {
   overflow: auto;
-  min-height: 40%;
+  min-height: 100%;
   height: calc(100vh - 60%);
+  width: calc(100vw - 348px);
 }
 .titlebar-drag-region {
   /*added*/

diff --git a/src/components/SqlDataViewer.tsx b/src/components/SqlDataViewer.tsx
@@ -21,7 +21,7 @@ const SqlDataViewer = ({
 
   if (rows instanceof Array)
     return (
-      <div className="h-1/3 w-full overflow-auto sql-table-wrapper">
+      <div className="h-2/3 mb-9 w-full max-w-full overflow-auto">
         <Table
           {...{
             columnNames: getColumnNames(rows),
@@ -31,10 +31,7 @@ const SqlDataViewer = ({
       </div>
     );
   return (
-    <pre
-      className="h-1/3 overflow-y-auto bg-gray-700 p-2 text-gray-200 font-mono"
-      style={{ height: '40%' }}
-    >
+    <pre className="h-2/3 mb-9 overflow-y-auto bg-gray-700 p-2 text-gray-200 font-mono">
       {rows && JSON.stringify(rows, null, 2)}
     </pre>
   );

diff --git a/src/components/SqlExecuter.tsx b/src/components/SqlExecuter.tsx
@@ -68,9 +68,9 @@ const SqlExecuter = ({
   };
 
   return (
-    <div className="p-4 h-full w-full bg-gray-800">
+    <div className="flex flex-col p-4 h-full w-full bg-gray-800">
       <textarea
-        className="w-full h-1/2 font-mono p-2 bg-gray-700 text-gray-200"
+        className="h-1/3 w-full font-mono p-2 bg-gray-700 text-gray-200"
         value={sql}
         onChange={(e) => setSql(e?.target?.value)}
         onKeyDown={(e) => {
@@ -82,7 +82,7 @@ const SqlExecuter = ({
         }}
         tabIndex={0}
       />
-      <div className="flex flex-1 w-full justify-between text-gray-200">
+      <div className="flex flex-1 max-h-10 w-full justify-between text-gray-200">
         <div className="align-center text-xs px-2 pt-2">
           Status:
           <span

diff --git a/src/components/SqlScreen.tsx b/src/components/SqlScreen.tsx
@@ -12,7 +12,7 @@ const SqlScreen = ({ session }: { session: DbSession }) => {
         <SideHeader title="Queries" />
         <SqlHistory setSelectedSql={setSelectedSql} />
       </div>
-      <div className="h-full w-full max-h-full border-l border-gray-600">
+      <div className="border-l border-gray-600 sql-dataview-wrapper">
         <SqlExecuter session={session} selectedSql={selectedSql} />
       </div>
     </div>