fix styles when wrapped

agneym · Mar 13, 2021 · 7e564ee · 7e564ee
1 parent 6739d20
commit 7e564ee
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/playground/.babelrc b/playground/.babelrc
@@ -5,6 +5,7 @@
     "@babel/preset-typescript"
   ],
   "plugins": [
-    "babel-plugin-transform-goober"
+    "babel-plugin-transform-goober",
+    "@babel/plugin-proposal-nullish-coalescing-operator"
   ]
 }
diff --git a/playground/package.json b/playground/package.json
@@ -36,6 +36,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.10.3",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
     "@babel/preset-env": "^7.10.3",
     "@babel/preset-react": "^7.10.1",
     "@babel/preset-typescript": "^7.10.1",

diff --git a/playground/src/Draggable/index.tsx b/playground/src/Draggable/index.tsx
@@ -1,15 +1,15 @@
-import React, { FC, ReactNode, useRef } from "react";
+import React, { FC, ReactNode, useRef, forwardRef } from "react";
 import { styled } from "goober";
 
 import useDrag from "./useDrag";
 import { useTheme } from "../utils/ThemeProvider";
 
-const Container = styled('div')`
+const Container = styled('div', forwardRef)`
   display: flex;
   align-items: stretch;
 `;
 
-const Divider = styled('div')`
+const Divider = styled('div', forwardRef)`
   width: ${props => props.theme.divider.width}px;
   cursor: col-resize;
   background-color: ${props => props.theme.divider.background};

diff --git a/playground/src/Editor/EditorSetup.tsx b/playground/src/Editor/EditorSetup.tsx
@@ -7,12 +7,12 @@ import { styled } from "goober";
 import { IEditorTabs } from "../types";
 
 const EditorWrapper = styled("div")`
-  display: inline-block;
   background-color: ${(props) => props.theme.editor.backgroundColor};
   color: ${(props) => props.theme.editor.color};
   overflow-y: auto !important;
   font-family: ${(props) => props.theme.editor.fontFamily};
   font-feature-settings: normal;
+  height: 100%;
 `;
 
 interface IProps {

diff --git a/yarn.lock b/yarn.lock
@@ -428,6 +428,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.3.tgz#aac45cccf8bc1873b99a85f34bceef3beb5d3244"
   integrity sha512-j/+j8NAWUTxOtx4LKHybpSClxHoq6I91DQ/mKgAXn5oNUPIUiGppjPIX3TDtJWPrdfP9Kfl7e4fgVMiQR9VE/g==
 
+"@babel/helper-plugin-utils@^7.13.0":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
+  integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
+
 "@babel/helper-plugin-utils@^7.8.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
@@ -701,6 +706,14 @@
     "@babel/helper-plugin-utils" "^7.10.1"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
 
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8":
+  version "7.13.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.13.8.tgz#3730a31dafd3c10d8ccd10648ed80a2ac5472ef3"
+  integrity sha512-iePlDPBn//UhxExyS9KyeYU7RM9WScAG+D3Hhno0PLJebAEpDZMocbDe64eqynhNAnwz/vZoL/q/QB2T1OH39A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.13.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
 "@babel/plugin-proposal-numeric-separator@^7.10.1":
   version "7.10.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.1.tgz#a9a38bc34f78bdfd981e791c27c6fdcec478c123"