--- a/client/src/components/App.vue	Tue Jul 13 16:17:01 2021 +0200
+++ b/client/src/components/App.vue	Wed Jul 14 12:07:31 2021 +0200
@@ -2,7 +2,7 @@
   <div id="app" class="main" style="overflow-x:scroll">
     <div v-if="isAuthenticated" class="d-flex flex-column userinterface">
       <div class="boxes d-flex p-2">
-        <div class="mr-auto d-flex">
+        <div class="d-flex">
           <Sidebar />
           <div :class="searchContainer">
             <Search v-if="isMapVisible" />

--- a/client/src/components/Bottlenecks.vue	Tue Jul 13 16:17:01 2021 +0200
+++ b/client/src/components/Bottlenecks.vue	Wed Jul 14 12:07:31 2021 +0200
@@ -18,7 +18,7 @@
           title: `${latestmeasurementLabel}`,
           width: '150px'
         },
-        { id: 'properties.from', title: `${chainageLabel}`, width: '135px' }
+        { id: 'properties.from', title: `${chainageLabel}`, width: '155px' }
       ]"
     />
     <UITableBody
@@ -44,7 +44,7 @@
             v-if="bottleneck.properties.current"
           />
         </div>
-        <div class="table-cell" style="width: 135px">
+        <div class="table-cell" style="flex-grow:1;">
           {{
             displayCurrentChainage(
               bottleneck.properties.from,
@@ -52,7 +52,6 @@
             )
           }}
         </div>
-        <div class="table-cell center" style="flex-grow: 1"></div>
       </template>
       <template v-slot:expand="{ item: bottleneck }">
         <a

--- a/client/src/components/Contextbox.vue	Tue Jul 13 16:17:01 2021 +0200
+++ b/client/src/components/Contextbox.vue	Wed Jul 14 12:07:31 2021 +0200
@@ -47,7 +47,10 @@
         "ui-element shadow-xs contextbox",
         {
           contextboxcollapsed: !this.showContextBox,
-          contextboxextended: this.showContextBox,
+          contextboxextended:
+            this.showContextBox && this.contextBoxContent !== "bottlenecks",
+          contextboxbottlenecks:
+            this.showContextBox && this.contextBoxContent === "bottlenecks",
           "rounded-bottom": this.contextBoxContent !== "imports",
           rounded: this.contextBoxContent === "imports"
         }
@@ -79,9 +82,6 @@
   overflow: hidden;
   background: #fff;
 }
-.contextbox > div:last-child {
-  width: 860px;
-}
 
 .contextboxcollapsed {
   max-width: 0;
@@ -89,7 +89,15 @@
 }
 
 .contextboxextended {
-  max-width: 860px;
+  max-width: 858px;
+  transition: 0.1s;
+  transition-timing-function: ease;
+}
+
+.contextboxbottlenecks {
+  max-width: 650px;
+  transition: 0.1s;
+  transition-timing-function: ease;
 }
 
 .close-contextbox {

--- a/client/src/components/Search.vue	Tue Jul 13 16:17:01 2021 +0200
+++ b/client/src/components/Search.vue	Wed Jul 14 12:07:31 2021 +0200
@@ -9,6 +9,10 @@
       :class="[
         'searchgroup',
         {
+          searchgroupwidthbottlenecks:
+            this.showSearchbar && this.contextBoxContent === 'bottlenecks',
+          sgnobottlenecks:
+            this.showSearchbar && this.contextBoxContent !== 'bottlenecks',
           'searchgroup-collapsed': !showSearchbar,
           big:
             showContextBox &&
@@ -85,7 +89,36 @@
 <style lang="scss" scoped>
 .searchcontainer {
   opacity: 0.96;
+}
+
+.searchcontainerwitdh {
   width: 860px;
+  transition: 0.1s;
+  transition-timing-function: ease;
+}
+
+.searchcontainerwitdhbottlenecks {
+  width: 650px;
+  transition: 0.1s;
+  transition-timing-function: ease;
+}
+
+.searchgroupwidth {
+  max-width: 860px;
+  transition: 0.1s;
+  transition-timing-function: ease;
+}
+
+.sgnobottlenecks {
+  width: 817px;
+  transition: 0.1s;
+  transition-timing-function: ease;
+}
+
+.searchgroupwidthbottlenecks {
+  width: 617px;
+  transition: 0.1s;
+  transition-timing-function: ease;
 }
 
 .searchcontainer .searchbar {
@@ -94,7 +127,6 @@
 }
 
 .searchgroup {
-  width: 827px;
   overflow: hidden;
 }
 
@@ -218,7 +250,15 @@
         {
           "d-flex": this.contextBoxContent !== "imports",
           "d-none": this.contextBoxContent === "imports" && this.showContextBox,
-          smallbox: !this.showSearchbar
+          smallbox: !this.showSearchbar,
+          searchcontainerwidth:
+            this.showSearchbar && this.contextBoxContent !== "bottlenecks",
+          searchgroupwidth:
+            this.showSearchbar && this.contextBoxContent !== "bottlenecks",
+          searchcontainerwidthbottlenecks:
+            this.showSearchbar && this.contextBoxContent === "bottlenecks",
+          searchgroupwidthbottleneks:
+            this.showSearchbar && this.contextBoxContent === "bottlenecks"
         }
       ];
     },