chore: spacing fix

Author: montezume

src/components/inputs/localized-rich-text-input/editor.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/core';
+import styled from '@emotion/styled';
 import { useIntl } from 'react-intl';
 import filterDataAttributes from '../../../utils/filter-data-attributes';
 import usePrevious from '../../../hooks/use-previous';
@@ -16,6 +17,10 @@ import { getLanguageLabelStyles } from './editor.styles';
 
 const COLLAPSED_HEIGHT = 32;
 
+const Wrapper = styled.div`
+  flex: 1;
+`;
+
 const Editor = props => {
   const intl = useIntl();
   const ref = React.useRef();
@@ -53,6 +58,8 @@ const Editor = props => {
     onToggle();
   }
 
+  const languagesControl = props.languagesControl();
+
   return (
     <CollapsibleMotion
       minHeight={COLLAPSED_HEIGHT}
@@ -108,34 +115,45 @@ const Editor = props => {
             <div
               css={css`
                 display: flex;
+
+                &:empty {
+                  margin: 0 !important;
+                }
               `}
             >
-              <div
-                css={css`
-                  flex: 1;
-                `}
-              >
-                {(() => {
-                  if (props.error) return <div>{props.error}</div>;
-                  if (props.warning) return <div>{props.warning}</div>;
-                  return props.languagesControl();
-                })()}
-              </div>
-              <div
-                css={css`
-                  flex: 0;
-                `}
-              >
-                {renderToggleButton && isOpen && (
+              {(() => {
+                if (props.error)
+                  return (
+                    <Wrapper>
+                      <div>{props.error}</div>
+                    </Wrapper>
+                  );
+                if (props.warning)
+                  return (
+                    <Wrapper>
+                      <div>{props.warning}</div>
+                    </Wrapper>
+                  );
+                return (
+                  languagesControl && <Wrapper>{languagesControl}</Wrapper>
+                );
+              })()}
+              {renderToggleButton && isOpen && (
+                <div
+                  css={css`
+                    flex: 0;
+                  `}
+                >
                   <FlatButton
                     onClick={toggle}
                     label={intl.formatMessage(messages.collapse)}
                     icon={<AngleUpIcon size="small" />}
                   />
-                )}
-              </div>
+                </div>
+              )}
+
+              {(props.error || props.warning) && props.languagesControl()}
             </div>
-            {(props.error || props.warning) && props.languagesControl()}
           </Spacings.Stack>
         );
       }}

src/components/inputs/localized-rich-text-input/localized-rich-text-input.js

@@ -110,7 +110,7 @@ const LocalizedMultilineTextInput = props => {
 
   return (
     <Constraints.Horizontal constraint={props.horizontalConstraint}>
-      <Spacings.Stack scale="s">
+      <Spacings.Stack>
         {languages.map((language, index) => {
           const isFirstLanguage = index === 0;
           if (!isFirstLanguage && !areLanguagesOpened) return null;