fix embed title (codesandbox#911)

* fix(embed): dynamic height when long title on sidebar

* fix(embed): adding white space when title is long

* chore(embed): title as variable to use in title attribute

Author: emersonlaurentino

packages/app/src/embed/components/Header/elements.js

@@ -22,17 +22,38 @@ export const MenuIcon = styled(MenuIconSVG)`
   z-index: 10;
 `;
 
-export const RightAligned = styled.div`
-  position: absolute;
-  right: 1rem;
-  top: 0;
-  bottom: 0;
+export const LeftAligned = styled.div`
+  position: relative;
+  display: flex;
+  width: calc(50% - 100px);
   height: 100%;
+  align-items: center;
+  justify-content: flex-start;
+`;
+export const CenterAligned = styled.div`
+  position: relative;
   display: flex;
+  width: 200px;
+  height: 100%;
+  align-items: center;
   justify-content: center;
 `;
 
+export const RightAligned = styled.div`
+  position: relative;
+  display: flex;
+  width: calc(50% - 100px);
+  height: 100%;
+  align-items: center;
+  justify-content: flex-end;
+`;
+
 export const Title = styled.div`
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  flex: 1;
+
   @media (max-width: 450px) {
     display: none;
   }

packages/app/src/embed/components/Header/index.js

@@ -1,12 +1,17 @@
 // @flow
 import * as React from 'react';
-
 import type { Sandbox } from 'common/types';
-
 import ModeIcons from 'app/components/ModeIcons';
 import EditorLink from '../EditorLink';
 
-import { Container, MenuIcon, RightAligned, Title } from './elements';
+import {
+  Container,
+  MenuIcon,
+  Title,
+  RightAligned,
+  CenterAligned,
+  LeftAligned,
+} from './elements';
 
 type Props = {
   sandbox: Sandbox,
@@ -27,17 +32,23 @@ function Header({
   setMixedView,
   toggleSidebar,
 }: Props) {
+  const sandboxTitle = sandbox.title || sandbox.id;
+
   return (
     <Container>
-      <MenuIcon onClick={toggleSidebar} />
-      <Title>{sandbox.title || sandbox.id}</Title>
-      <ModeIcons
-        showEditor={showEditor}
-        showPreview={showPreview}
-        setEditorView={setEditorView}
-        setPreviewView={setPreviewView}
-        setMixedView={setMixedView}
-      />
+      <LeftAligned>
+        <MenuIcon onClick={toggleSidebar} />
+        <Title title={sandboxTitle}>{sandboxTitle}</Title>
+      </LeftAligned>
+      <CenterAligned>
+        <ModeIcons
+          showEditor={showEditor}
+          showPreview={showPreview}
+          setEditorView={setEditorView}
+          setPreviewView={setPreviewView}
+          setMixedView={setMixedView}
+        />
+      </CenterAligned>
       <RightAligned>
         <EditorLink small sandbox={sandbox} />
       </RightAligned>

packages/app/src/embed/components/Sidebar/elements.js

@@ -16,8 +16,8 @@ export const Title = styled.h2`
   padding: 0 1rem;
   margin: 0;
   font-size: 1rem;
-  line-height: 3rem;
-  height: 3rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
   vertical-align: middle;
   box-sizing: border-box;
 `;

packages/app/src/embed/components/Sidebar/index.js

@@ -56,10 +56,12 @@ function Sidebar({ sandbox, setCurrentModule, currentModule }: Props) {
 
   npmDependencies = npmDependencies || {};
 
+  const sandboxTitle = sandbox.title || sandbox.id;
+
   return (
     <Container>
       <Item>
-        <Title>{sandbox.title || sandbox.id}</Title>
+        <Title title={sandboxTitle}>{sandboxTitle}</Title>
         {sandbox.author && (
           <Author>
             Made by <strong>{sandbox.author.username}</strong>