add minimum width to both containers

agneym · Dec 18, 2019 · 864ee96 · 864ee96
1 parent f52b4d7
commit 864ee96
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 1 deletion.
diff --git a/playground/src/Editor/index.tsx b/playground/src/Editor/index.tsx
@@ -11,7 +11,9 @@ import {
   StyledTabPanel,
 } from "../TabStyles";
 
-const TabContainer = styled(StyledTabs)``;
+const TabContainer = styled(StyledTabs)`
+  min-width: ${props => props.theme.container.minWidth};
+`;
 
 interface IProps {
   width: number;

diff --git a/playground/src/TabStyles.tsx b/playground/src/TabStyles.tsx
@@ -7,6 +7,7 @@ export const StyledTabs = styled(Tabs)`
   display: flex;
   flex-direction: column;
   width: 50%;
+  min-width: ${props => props.theme.container.minWidth};
 
   ${media.phone`
     width: 100%;

diff --git a/playground/src/utils/theme.ts b/playground/src/utils/theme.ts
@@ -4,6 +4,7 @@ const theme: DefaultTheme = {
   container: {
     border: "0.1em solid rgba(0, 0, 0, 0.3)",
     minHeight: "20em",
+    minWidth: "20em",
   },
   error: {
     background: "#e74c3c",