From 3d76b07a9afcd600cad1a637674997b975e79b14 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 11 Jan 2023 12:09:58 +0000
Subject: [PATCH] Make automation history page responsive

---
 .../[appId]/automation-history/index.svelte   | 100 +++++++++---------
 1 file changed, 52 insertions(+), 48 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte
index 30f77696f4..78ab2abe52 100644
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[appId]/automation-history/index.svelte
@@ -155,47 +155,47 @@
   </Layout>
   <Divider />
 
-  <div class="search">
-    <div class="select">
-      <Select
-        placeholder="All"
-        label="Status"
-        bind:value={status}
-        options={statusOptions}
-      />
-    </div>
-    <div class="select">
-      <Select
-        placeholder="All"
-        label="Automation"
-        bind:value={automationId}
-        options={automationOptions}
-      />
-    </div>
-    <div class="select">
-      <Select
-        placeholder="All"
-        label="Date range"
-        bind:value={timeRange}
-        options={timeOptions}
-        isOptionEnabled={x => {
-          if (licensePlan?.type === Constants.PlanType.FREE) {
-            return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0
-          } else if (licensePlan?.type === Constants.PlanType.TEAM) {
-            return ["90-d"].indexOf(x.value) < 0
-          } else if (licensePlan?.type === Constants.PlanType.PRO) {
-            return ["30-d", "90-d"].indexOf(x.value) < 0
-          }
-          return true
-        }}
-      />
+  <div class="controls">
+    <div class="search">
+      <div class="select">
+        <Select
+          placeholder="All"
+          label="Status"
+          bind:value={status}
+          options={statusOptions}
+        />
+      </div>
+      <div class="select">
+        <Select
+          placeholder="All"
+          label="Automation"
+          bind:value={automationId}
+          options={automationOptions}
+        />
+      </div>
+      <div class="select">
+        <Select
+          placeholder="All"
+          label="Date range"
+          bind:value={timeRange}
+          options={timeOptions}
+          isOptionEnabled={x => {
+            if (licensePlan?.type === Constants.PlanType.FREE) {
+              return ["1-w", "30-d", "90-d"].indexOf(x.value) < 0
+            } else if (licensePlan?.type === Constants.PlanType.TEAM) {
+              return ["90-d"].indexOf(x.value) < 0
+            } else if (licensePlan?.type === Constants.PlanType.PRO) {
+              return ["30-d", "90-d"].indexOf(x.value) < 0
+            }
+            return true
+          }}
+        />
+      </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>
+      <Button secondary on:click={$licensing.goToUpgradePage()}>
+        Get more history
+      </Button>
     {/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>