All docked direction positioning fixed

desktop-app/app/components/DevicesPreviewer/useStyles.js

@@ -22,6 +22,7 @@ const useStyles = makeStyles(theme => ({
   devicesContainer: {
     display: 'flex',
     paddingBottom: '100px',
+    paddingLeft: 5,
   },
   tab: {
     display: 'none',

desktop-app/app/components/Drawer.js

@@ -52,11 +52,12 @@ const useStyles = makeStyles(theme => ({
     overflow: 'hidden',
     transition: 'margin-left 0.2s',
     background: theme.palette.header.main,
-    margin: '0 10px 0 -310px',
+    margin: '0 0 0 -310px',
     padding: '5px 5px 0 5px',
   },
   drawerOpen: {
     marginLeft: 0,
+    marginRight: 5,
     flexShrink: 0,
     boxShadow: `${theme.palette.mode({
       light: '0px 2px 4px',

desktop-app/app/components/LiveCssEditor/index.js

@@ -22,16 +22,34 @@ import {
   isHorizontallyStacked,
   isVeriticallyStacked,
 } from '../../constants/previewerLayouts';
+import KebabMenu from '../KebabMenu';
+import {Tooltip} from '@material-ui/core';
+import DockRight from '../icons/DockRight';
+
+const getResizingDirections = position => {
+  switch (position) {
+    case CSS_EDITOR_MODES.LEFT:
+      return {right: true};
+    case CSS_EDITOR_MODES.RIGHT:
+      return {left: true};
+    case CSS_EDITOR_MODES.TOP:
+      return {bottom: true};
+    case CSS_EDITOR_MODES.BOTTOM:
+      return {top: true};
+    default:
+      return null;
+  }
+};
 
 const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => {
   const classes = useStyles();
   const commonClasses = useCommonStyles();
   const [css, setCss] = useState(null);
   const [height, setHeight] = useState(
-    isVeriticallyStacked(position) ? '100%' : 200
+    isVeriticallyStacked(position) ? 'calc(100vh - 70px - 30px)' : 300
   );
   const [width, setWidth] = useState(
-    isHorizontallyStacked(position) ? '100%' : 400
+    isHorizontallyStacked(position) ? 'calc(100vw - 50px)' : 400
   );
 
   const onApply = () => {
@@ -43,15 +61,24 @@ const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => {
 
   useEffect(onApply, [css]);
 
+  const enableResizing = useMemo(() => getResizingDirections(position), [
+    position,
+  ]);
+  const disableDragging = useMemo(
+    () => position !== CSS_EDITOR_MODES.UNDOCKED,
+    [position]
+  );
+
   return (
     <div className={classes.wrapper} style={{height, width}}>
       <Rnd
         dragHandleClassName={classes.titleBar}
-        disableDragging={position !== CSS_EDITOR_MODES.UNDOCKED}
+        disableDragging={disableDragging}
+        enableResizing={enableResizing}
         style={{zIndex: 100}}
         default={{
-          width: isHorizontallyStacked(position) ? '100%' : 400,
-          height: isVeriticallyStacked(position) ? '100%' : 200,
+          width: '100%',
+          height: '100%',
           x: 0,
           y: 0,
         }}
@@ -67,8 +94,23 @@ const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => {
         }}
       >
         <div className={classes.container}>
-          <div className={classes.titleBar}>Live CSS Editor</div>
-          <div className="">
+          <div
+            className={cx(
+              classes.titleBar,
+              commonClasses.flexContainerSpaceBetween
+            )}
+          >
+            Live CSS Editor{' '}
+            <KebabMenu>
+              <div onClick={() => {}}>
+                Dock to Right{' '}
+                <span className="" onClick={() => {}}>
+                  <DockRight height={10} />
+                </span>
+              </div>
+            </KebabMenu>
+          </div>
+          <div className={classes.mainContent}>
             <AceEditor
               className={classes.editor}
               placeholder="Enter CSS to apply"
@@ -82,7 +124,7 @@ const LiveCssEditor = ({isOpen, position, content, boundaryClass}) => {
               highlightActiveLine={true}
               value={css}
               width="100%"
-              height="auto"
+              height="100%"
               setOptions={{
                 enableBasicAutocompletion: true,
                 enableLiveAutocompletion: true,

desktop-app/app/components/LiveCssEditor/useStyles.js

@@ -5,8 +5,12 @@ const useStyles = makeStyles(theme => ({
     position: 'relative',
     display: 'flex',
     flexShrink: 0,
+    marginBottom: 10,
   },
   container: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
     background: theme.palette.background.l2,
     margin: 5,
     padding: 10,
@@ -20,9 +24,13 @@ const useStyles = makeStyles(theme => ({
     cursor: 'move',
     padding: '5px 0',
   },
+  mainContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+  },
   editor: {
-    minHeight: 200,
-    height: 'auto',
+    height: '100%',
     marginBottom: 10,
   },
 }));