From 4ddb63d79c307608ebf243ccb3d67653a73c6b16 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 11 Jan 2023 16:39:32 +0000
Subject: [PATCH] Update backups page to be responsive

---
 .../overview/[appId]/backups/index.svelte     | 67 ++++++++++---------
 1 file changed, 37 insertions(+), 30 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte
index 860d8dacad..42e3cd19a9 100644
--- a/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[appId]/backups/index.svelte
@@ -14,7 +14,6 @@
     Tags,
     Tag,
     Table,
-    Page,
   } from "@budibase/bbui"
   import { backups, licensing, auth, admin, overview } from "stores/portal"
   import { createPaginationStore } from "helpers/pagination"
@@ -223,29 +222,30 @@
     </div>
   {:else if loaded}
     <Layout noPadding gap="M" alignContent="start">
-      <div class="search">
-        <div class="select">
-          <Select
-            placeholder="All"
-            label="Type"
-            options={filters}
-            getOptionValue={filter => filter.value}
-            getOptionLabel={filter => filter.label}
-            bind:value={filterOpt}
+      <div class="controls">
+        <div class="search">
+          <div class="select">
+            <Select
+              placeholder="All"
+              label="Type"
+              options={filters}
+              getOptionValue={filter => filter.value}
+              getOptionLabel={filter => filter.label}
+              bind:value={filterOpt}
+            />
+          </div>
+          <DatePicker
+            range={true}
+            label="Date Range"
+            on:change={e => {
+              if (e.detail[0].length > 1) {
+                startDate = e.detail[0][0].toISOString()
+                endDate = e.detail[0][1].toISOString()
+              }
+            }}
           />
         </div>
-        <DatePicker
-          range={true}
-          label="Date Range"
-          on:change={e => {
-            if (e.detail[0].length > 1) {
-              startDate = e.detail[0][0].toISOString()
-              endDate = e.detail[0][1].toISOString()
-            }
-          }}
-        />
-
-        <div class="split-buttons">
+        <div>
           <ActionButton on:click={modal.show} icon="SaveAsFloppy">
             Create new backup
           </ActionButton>
@@ -291,15 +291,29 @@
     gap: var(--spacing-xl);
   }
 
+  .controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: flex-end;
+    gap: var(--spacing-xl);
+    flex-wrap: wrap;
+  }
+
   .search {
+    flex: 1 1 auto;
     display: flex;
     gap: var(--spacing-xl);
-    width: 100%;
     align-items: flex-end;
   }
+  .search :global(.spectrum-InputGroup) {
+    min-width: 100px;
+  }
 
   .select {
     flex-basis: 160px;
+    width: 0;
+    min-width: 100px;
   }
 
   .pagination {
@@ -309,13 +323,6 @@
     margin-top: var(--spacing-xl);
   }
 
-  .split-buttons {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    flex: 1;
-  }
-
   .title {
     display: flex;
     flex-direction: row;