diff --git a/src/components/MainPage.vue b/src/components/MainPage.vue
index 52bc1e32..619ff802 100644
--- a/src/components/MainPage.vue
+++ b/src/components/MainPage.vue
@@ -9,14 +9,10 @@
                 <div class="turquoise"></div>
                 <div class="green"></div>
             </div>
-             <div id="main-toolbar" class="main-toolbar">
-                <div class="left-align">
-                    <a class="main-button" v-on:click="goToLandingPage">{{ landingPageName }}</a>
-                </div>
-                <div class="right-align">
-                    <TopicSearchBox class="topic-search-box"></TopicSearchBox>
-                    <UILanguageMenu class="language-menu"></UILanguageMenu>
-                </div>
+            <div id="main-toolbar" class="main-toolbar">
+                <a class="main-button" v-on:click="goToLandingPage">{{ landingPageName }}</a>
+                <TopicSearchBox class="topic-search-box"></TopicSearchBox>
+                <UILanguageMenu class="language-menu"></UILanguageMenu>
             </div>
           <component
               v-bind:is="currentTabComponentName"
@@ -116,6 +112,9 @@ export default {
     font-size: 16pt;
     color: #333;
     cursor: pointer;
+    min-width: 0;
+    overflow: hidden;
+    flex-shrink: 1;
 }
 
 a.main-button:hover {
@@ -169,6 +168,7 @@ a.main-button:hover {
 .topic-search-box {
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
 }
 
 .language-bar {
diff --git a/src/components/TopicSearchBox.vue b/src/components/TopicSearchBox.vue
index 6d1c4ccf..b74d0c7d 100644
--- a/src/components/TopicSearchBox.vue
+++ b/src/components/TopicSearchBox.vue
@@ -166,9 +166,10 @@ export default {
     border: none;
     text-align: right;
     right: 35px;
-    min-width: 300px;
     height: 100%;
     box-sizing: border-box;
+    width: 60px;
+    flex-grow: 1;
 }
 
 .input-find:focus {
diff --git a/src/components/menu/MainToolbar.vue b/src/components/menu/MainToolbar.vue
index 65127b9a..192d713b 100644
--- a/src/components/menu/MainToolbar.vue
+++ b/src/components/menu/MainToolbar.vue
@@ -9,13 +9,9 @@
             <div class="green"></div>
         </div>
         <div id="top-toolbar" class="top-toolbar">
-            <div class="left-align">
-                <a class="main-button" @click="goToLandingPage">{{ landingPageName }}</a>
-            </div>
-            <div class="right-align">
-                <TopicSearchBox class="topic-search-box"></TopicSearchBox>
-                <UILanguageMenu class="language-menu"></UILanguageMenu>
-            </div>
+            <a class="main-button" @click="goToLandingPage">{{ landingPageName }}</a>
+            <TopicSearchBox class="topic-search-box"></TopicSearchBox>
+            <UILanguageMenu class="language-menu"></UILanguageMenu>
         </div>
     </div>
 </template>
@@ -63,6 +59,9 @@ export default {
     margin-left: 20px;
     color: #333;
     cursor: pointer;
+    min-width: 0;
+    overflow: hidden;
+    flex-shrink: 1;
 }
 
 a.main-button:hover {
@@ -92,6 +91,7 @@ a.main-button:hover {
 .topic-search-box {
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
 }
 
 </style>