diff --git a/src/app/components/side-panel/side-panel.component.html b/src/app/components/side-panel/side-panel.component.html
index d06b5d5a..02020de3 100644
--- a/src/app/components/side-panel/side-panel.component.html
+++ b/src/app/components/side-panel/side-panel.component.html
@@ -31,6 +31,7 @@
     <div class="app-select-container">
       <mat-select
         class="app-select"
+        panelClass="wide-agent-dropdown-panel"
         (selectionChange)="appSelectionChange.emit($event)"
         [placeholder]="isLoadingApps()() ? 'Loading...' : 'Select an agent'"
         [formControl]="selectedAppControl()"
diff --git a/src/app/components/side-panel/side-panel.component.scss b/src/app/components/side-panel/side-panel.component.scss
index d699775e..86dc4605 100644
--- a/src/app/components/side-panel/side-panel.component.scss
+++ b/src/app/components/side-panel/side-panel.component.scss
@@ -140,7 +140,7 @@
 }
 
 .app-select-container {
-  width: 35%;
+  width: 60%;
   margin-top: 12px;
   background-color: var(--side-panel-app-select-container-background-color);
   margin-left: 10px;
@@ -229,3 +229,16 @@
   white-space: wrap;
   font-size: 11px;
 }
+
+:host ::ng-deep .wide-agent-dropdown-panel {
+  min-width: 300px;
+  max-width: 600px;
+
+  .mat-mdc-option {
+    white-space: normal;
+    line-height: 1.4;
+    height: auto;
+    min-height: 48px;
+    padding: 8px 16px;
+  }
+}