From e577001acd73bef313d42c0351c8ee09bda5f25e Mon Sep 17 00:00:00 2001
From: thecodrr <thecodrr@protonmail.com>
Date: Thu, 22 Apr 2021 13:12:51 +0500
Subject: [PATCH] feat: stretch title in toolbar

---
 apps/web/src/components/editor/toolbar.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/editor/toolbar.js b/apps/web/src/components/editor/toolbar.js
index cac36dc3a..b24c3761f 100644
--- a/apps/web/src/components/editor/toolbar.js
+++ b/apps/web/src/components/editor/toolbar.js
@@ -116,7 +116,7 @@ function Toolbar(props) {
 
   return (
     <Flex m={2} justifyContent={"space-between"}>
-      <Flex justifyContent="center" alignItems="center">
+      <Flex justifyContent="center" alignItems="center" flex={1}>
         <Icon.ArrowLeft
           sx={{
             display: ["block", "block", "none"],
@@ -147,6 +147,9 @@ function Toolbar(props) {
             p: 0,
             borderWidth: 0,
             borderRadius: 0,
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
             ":focus": { borderWidth: 0 },
           }}
         />
@@ -161,8 +164,10 @@ function Toolbar(props) {
             title={tool.title}
             key={tool.title}
             sx={{
-              display: [tool.hideOnMobile ? "none" : "block", "block", "block"],
-              visibility: tool.hidden ? "collapse" : "visible",
+              display: [
+                tool.hideOnMobile ? "none" : "block",
+                tool.hidden ? "none" : "block",
+              ],
               color: tool.enabled ? "text" : "disabled",
               cursor: tool.enabled ? "pointer" : "not-allowed",
             }}