diff --git a/packages/web/src/widgets/DatabaseWidget.js b/packages/web/src/widgets/DatabaseWidget.js
index 8ec55d0de..e392b4316 100644
--- a/packages/web/src/widgets/DatabaseWidget.js
+++ b/packages/web/src/widgets/DatabaseWidget.js
@@ -9,19 +9,47 @@ import { useSetCurrentDatabase, useCurrentDatabase } from '../utility/globalStat
import tableAppObject from '../appobj/tableAppObject';
import theme from '../theme';
+const SearchBoxWrapper = styled.div`
+ display: flex;
+ margin-bottom: 5px;
+`;
+
const MainContainer = styled.div`
position: relative;
display: flex;
flex-flow: column wrap;
flex: 1;
+ flex-direction: column;
+`;
+
+const OuterContainer = styled.div`
+ flex: 1 1 0;
+ // min-height: 10px;
+ overflow: hidden;
+ width: ${theme.leftPanel.width}px;
+ position: relative;
+ flex-direction: column;
+ display: flex;
`;
const InnerContainer = styled.div`
- flex: 1 0;
+ flex: 1 1;
overflow: scroll;
width: ${theme.leftPanel.width}px;
`;
+const Button = styled.button`
+ // -webkit-appearance: none;
+ // -moz-appearance: none;
+ // appearance: none;
+ // width: 50px;
+`;
+
+const Input = styled.input`
+ flex: 1;
+ min-width: 90px;
+`;
+
function SubDatabaseList({ data }) {
const setDb = useSetCurrentDatabase();
const handleDatabaseClick = database => {
@@ -45,7 +73,15 @@ function ConnectionList() {
});
return (
<>
-
+
+
+
+
+
+
+
+
+
>
);
}
@@ -77,12 +113,12 @@ function SqlObjectListWrapper() {
export default function DatabaseWidget() {
return (
-
+
-
-
+
+
-
+
);
}