--- 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"
         }
       ];
     },