fix(*): make filter input width take up max available space [KHCP-990…

…7] (#1196)
Kong · Feb 29, 2024 · 9775060 · 9775060
1 parent 6432ba9
commit 9775060
Show file tree

Hide file tree

Showing 13 changed files with 25 additions and 12 deletions.
diff --git a/packages/entities/entities-certificates/src/components/CACertificateList.vue b/packages/entities/entities-certificates/src/components/CACertificateList.vue
@@ -38,6 +38,7 @@
               appearance="primary"
               data-testid="toolbar-add-ca-certificate"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('ca-certificates.list.toolbar_actions.new_ca_certificate') }}
@@ -483,7 +484,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 }
 </style>
diff --git a/packages/entities/entities-certificates/src/components/CertificateList.vue b/packages/entities/entities-certificates/src/components/CertificateList.vue
@@ -38,6 +38,7 @@
               appearance="primary"
               data-testid="toolbar-add-certificate"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('certificates.list.toolbar_actions.new_certificate') }}
@@ -550,7 +551,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 }
 </style>
diff --git a/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue b/packages/entities/entities-consumer-credentials/src/components/ConsumerCredentialList.vue
@@ -29,6 +29,7 @@
               appearance="primary"
               data-testid="toolbar-add-credential"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t(`credentials.list.toolbar_actions.${config.plugin}.new`) }}

diff --git a/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue b/packages/entities/entities-consumer-groups/src/components/ConsumerGroupList.vue
@@ -42,6 +42,7 @@
               appearance="primary"
               data-testid="toolbar-add-consumer-group"
               icon="plus"
+              size="large"
               :to="config.consumerId ? undefined : config.createRoute"
               @click="() => config.consumerId ? handleAddToGroupClick() : undefined"
             >
@@ -612,7 +613,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 
   .exit-modal-message {

diff --git a/packages/entities/entities-consumers/src/components/ConsumerList.vue b/packages/entities/entities-consumers/src/components/ConsumerList.vue
@@ -42,6 +42,7 @@
               appearance="primary"
               data-testid="toolbar-add-consumer"
               icon="plus"
+              size="large"
               :to="config.consumerGroupId ? undefined : config.createRoute"
               @click="() => config.consumerGroupId ? handleAddConsumerClick() : undefined"
             >
@@ -626,7 +627,7 @@ onBeforeMount(async () => {
   }
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 }
 </style>
diff --git a/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue b/packages/entities/entities-gateway-services/src/components/GatewayServiceList.vue
@@ -38,6 +38,7 @@
               appearance="primary"
               data-testid="toolbar-add-gateway-service"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('gateway_services.list.toolbar_actions.new_gateway_service') }}
@@ -556,7 +557,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 }
 </style>
diff --git a/packages/entities/entities-key-sets/src/components/KeySetList.vue b/packages/entities/entities-key-sets/src/components/KeySetList.vue
@@ -38,6 +38,7 @@
               appearance="primary"
               data-testid="toolbar-add-key-set"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('keySets.list.toolbar_actions.new_key_set') }}
@@ -484,7 +485,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 }
 </style>
diff --git a/packages/entities/entities-keys/src/components/KeyList.vue b/packages/entities/entities-keys/src/components/KeyList.vue
@@ -38,6 +38,7 @@
               appearance="primary"
               data-testid="toolbar-add-key"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('keys.list.toolbar_actions.new_key') }}
@@ -493,7 +494,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 }
 </style>
diff --git a/packages/entities/entities-plugins/src/components/PluginList.vue b/packages/entities/entities-plugins/src/components/PluginList.vue
@@ -40,6 +40,7 @@
               appearance="primary"
               data-testid="toolbar-add-plugin"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('plugins.list.toolbar_actions.new_plugin') }}
@@ -771,7 +772,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 330px;
+    margin-right: $kui-space-50;
   }
 
   .table-content-overflow-wrapper {

diff --git a/packages/entities/entities-routes/src/components/RouteList.vue b/packages/entities/entities-routes/src/components/RouteList.vue
@@ -39,6 +39,7 @@
               appearance="primary"
               data-testid="toolbar-add-route"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('routes.list.toolbar_actions.new_route') }}
@@ -541,7 +542,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 }
 </style>
diff --git a/packages/entities/entities-snis/src/components/SniList.vue b/packages/entities/entities-snis/src/components/SniList.vue
@@ -39,6 +39,7 @@
               appearance="primary"
               data-testid="toolbar-add-sni"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('snis.list.toolbar_actions.new') }}
@@ -481,7 +482,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 }
 </style>
diff --git a/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue b/packages/entities/entities-upstreams-targets/src/components/UpstreamsList.vue
@@ -39,6 +39,7 @@
               appearance="primary"
               data-testid="toolbar-add-upstream"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('upstreams.list.toolbar_actions.new_upstream') }}
@@ -462,7 +463,7 @@ onBeforeMount(async () => {
 <style lang="scss" scoped>
 .kong-ui-entities-upstreams-list {
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
   .upstream-name {
     font-weight: 600;

diff --git a/packages/entities/entities-vaults/src/components/VaultList.vue b/packages/entities/entities-vaults/src/components/VaultList.vue
@@ -38,6 +38,7 @@
               appearance="primary"
               data-testid="toolbar-add-vault"
               icon="plus"
+              size="large"
               :to="config.createRoute"
             >
               {{ t('vaults.list.toolbar_actions.new_vault') }}
@@ -482,7 +483,7 @@ onBeforeMount(async () => {
   width: 100%;
 
   .kong-ui-entity-filter-input {
-    width: 300px;
+    margin-right: $kui-space-50;
   }
 
   .table-content-overflow-wrapper {