From 27ef0b006a28a43cc199204b866436a5acec1976 Mon Sep 17 00:00:00 2001
From: Linda <lifaythegoblin@googlemail.com>
Date: Tue, 11 Sep 2018 12:55:39 -0400
Subject: [PATCH] title field now resizes
---
src/components/menu-bar/menu-bar.css | 6 ++++++
src/components/menu-bar/menu-bar.jsx | 2 +-
src/components/menu-bar/project-title-input.css | 2 ++
3 files changed, 9 insertions(+), 1 deletion(-)
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index f55fccb15..67d94725b 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -37,6 +37,7 @@
justify-content: flex-start;
flex-wrap: nowrap;
align-items: center;
+ flex-grow: 1;
}
.scratch-logo {
@@ -84,6 +85,11 @@
background-color: $ui-black-transparent;
}
+.growableMenuBarItem {
+ max-width: 12rem;
+ flex: 1;
+}
+
.file-group {
display: flex;
flex-direction: row;
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index 82b37b0b0..5c1af68d6 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -393,7 +393,7 @@ class MenuBar extends React.Component {
<FormattedMessage {...ariaMessages.tutorials} />
</div>
<Divider className={classNames(styles.divider)} />
- <div className={classNames(styles.menuBarItem)}>
+ <div className={classNames(styles.menuBarItem, styles.growableMenuBarItem)}>
<MenuBarItemTooltip
enable
id="title-field"
diff --git a/src/components/menu-bar/project-title-input.css b/src/components/menu-bar/project-title-input.css
index 84dcd0afc..b1584a374 100644
--- a/src/components/menu-bar/project-title-input.css
+++ b/src/components/menu-bar/project-title-input.css
@@ -15,6 +15,8 @@ $title-width: 12rem;
width: $title-width;
height: auto;
padding: .5rem;
+ flex-grow: 1;
+ width: 2rem;
}
.title-field {
--
GitLab