Make automation history page responsive

packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte

@@ -155,6 +155,7 @@
   </Layout>
   <Divider />
 
+  <div class="controls">
     <div class="search">
       <div class="select">
         <Select
@@ -190,12 +191,11 @@
           }}
         />
       </div>
+    </div>
     {#if (licensePlan?.type !== Constants.PlanType.ENTERPRISE && $auth.user.accountPortalAccess) || !$admin.cloud}
-      <div class="pro-upgrade">
       <Button secondary on:click={$licensing.goToUpgradePage()}>
         Get more history
       </Button>
-      </div>
     {/if}
   </div>
 
@@ -236,14 +236,24 @@
 {/if}
 
 <style>
+  .controls {
+    display: flex;
+    flex-direction: row;
+    gap: var(--spacing-xl);
+    align-items: flex-end;
+    flex-wrap: wrap;
+  }
   .search {
     display: flex;
     gap: var(--spacing-xl);
-    width: 100%;
-    align-items: flex-end;
+    align-items: flex-start;
+    flex: 1 0 auto;
+    max-width: 100%;
   }
   .select {
-    flex-basis: 150px;
+    flex: 1 1 0;
+    max-width: 150px;
+    min-width: 80px;
   }
   .pagination {
     display: flex;
@@ -251,10 +261,4 @@
     justify-content: flex-end;
     margin-top: var(--spacing-xl);
   }
-  .pro-upgrade {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    flex: 1;
-  }
 </style>