From 864ee96d0130eb812bbb17800058fa441db583e5 Mon Sep 17 00:00:00 2001
From: Agney <agney@outlook.in>
Date: Wed, 18 Dec 2019 21:13:12 +0530
Subject: [PATCH] add minimum width to both containers

---
 playground/src/Editor/index.tsx | 4 +++-
 playground/src/TabStyles.tsx    | 1 +
 playground/src/utils/theme.ts   | 1 +
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/playground/src/Editor/index.tsx b/playground/src/Editor/index.tsx
index 606f52e..190bdef 100644
--- 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
index 3d7c25a..a8a6c8c 100644
--- 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
index c51c68c..7c32d04 100644
--- 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",