@rancher/shell 3.0.5-rc.6 → 3.0.5-rc.7

package/assets/styles/base/_variables.scss

@@ -42,25 +42,31 @@ $z-indexes: (
 
   cruFooter: 19,
 
-  modalOverlay: 20,
-  modalContent: 21,
+  loadingMain: 51,
 
-  tooltip: 30,
+  slide-in: 52,
 
-  dropdownOverlay: 40,
-  dropdownContent: 41,
+  modalOverlay: 53,
+  modalContent: 54,
 
-  loadingMain: 51
+  dropdownOverlay: 55,
+  dropdownContent: 56,
+
+  tooltip: 57,
 );
 
 // Usage Example:
 // @media only screen and (min-width: map-get($breakpoints, '--viewport-*')) {
 // }
 $breakpoints: (
-  '--viewport-4':  480px, // Phone
-  '--viewport-7':  768px, // Tablet
-  '--viewport-9':  992px, // Laptop/Desktop
-  '--viewport-12': 1281px, // Desktop
+  '--viewport-4': 480px,
+  // Phone
+  '--viewport-7': 768px,
+  // Tablet
+  '--viewport-9': 992px,
+  // Laptop/Desktop
+  '--viewport-12': 1281px,
+  // Desktop
 );
 
 $font-size-h2: 21px;
@@ -68,4 +74,4 @@ $font-size-h2: 21px;
 // Global spacing variables
 $space-s: 10px;
 $space-m: 20px;
-$space-l: 40px;
+$space-l: 40px;

package/assets/styles/themes/_dark.scss

@@ -51,6 +51,7 @@
   --slider-light-bg-right      : #{rgba($darker, 0)};
 
   --muted                      : #{$disabled};
+  --deemphasized               : #{$disabled};
 
   --body-bg                    : #{$darker};
   --body-text                  : #{$lightest};
@@ -94,6 +95,7 @@
 
   --modal-bg                   : #{$dark};
   --modal-border               : #{$medium};
+  --subtle-overlay-bg          : #{rgba($darkest, 0.75)};
   --overlay-bg                 : #{rgba($darkest, 0.75)};
   --shadow                     : #{rgba($darkest, 0.9)};
 

package/assets/styles/themes/_light.scss

@@ -156,11 +156,16 @@ BODY, .theme-light {
   }
 
   --muted                      : #{$dark};
+  --deemphasized               : #717179;
 
   .text-muted {
     color: var(--muted) !important;
   }
 
+  .text-deemphasized {
+    color: var(--deemphasized);
+  }
+
   --darker                    : #{$darker};
   --darker-text               : #{contrast-color($darker)};
   --darker-hover-bg           : #{darken($darker, 10%)};
@@ -402,7 +407,8 @@ BODY, .theme-light {
 
   --modal-bg                   : #{$lightest};
   --modal-border               : #{$dark};
-  --overlay-bg                 : #{rgba($lighter, 0.75)};
+  --subtle-overlay-bg          : #{rgba($lighter, 0.75)};
+  --overlay-bg                 : rgba(38, 42, 64, 0.35);
   --shadow                     : #{rgba($medium, 0.85)};
 
   --checkbox-tick              : #{$lightest};
@@ -468,7 +474,7 @@ BODY, .theme-light {
   --sortable-table-group-label : #{$secondary};
 
   --tag-primary                : #{$darkest};
-  --tag-bg                     : #{$medium};
+  --tag-bg                     : #EEEFF5;
 
   --popover-bg                 : var(--body-bg);
   --popover-border             : var(--border);

package/assets/translations/en-us.yaml

@@ -607,6 +607,9 @@ authConfig:
     starttls:
       label: Start TLS
       tip: Upgrades non-encrypted connections by wrapping with TLS during the connection process. Can not be used in conjunction with TLS.
+    searchUsingServiceAccount: 
+      label: Enable Service Account Search
+      tip: When enabled, Rancher will use the service account instead of the user account to search for users and groups.
     tls: TLS
     userEnabledAttribute: User Enabled Attribute
     userMemberAttribute: User Member Attribute
@@ -1074,10 +1077,8 @@ catalog:
     header: Charts
     noCharts:
       title: No charts to show
-      messagePart1: <b>Tips:</b> undo the last filter you applied or
-      messagePart2: clear all filters
-      messagePart3: ', and ensure you have the right <a tabindex="0" href={repositoriesUrl} rel="noopener noreferrer nofollow">repositories</a> in place.'
-      messagePart4: 'Want to learn more about Helm Charts and Apps? Read our <a tabindex="0" href="{docsBase}/how-to-guides/new-user-guides/helm-charts-in-rancher" target="_blank" class="secondary-text-link">documentation <i class="icon icon-external-link"></i></a>.'
+      message: '<b>Tips:</b> undo the last filter you applied or <resetAllFilters>clear all filters</resetAllFilters>, and ensure you have the right <repositoriesUrl>repositories</repositoriesUrl> in place.'
+      docsMessage: 'Want to learn more about Helm Charts and Apps? Read our <docsUrl>documentation</docsUrl>.'
     noWindows: Your repos do not contain any charts capable of being deployed on a cluster with Windows nodes.
     noWindowsAndLinux: Your repos do not contain any charts capable of being deployed on a cluster with both Windows and Linux worker nodes.
     operatingSystems:
@@ -1654,6 +1655,9 @@ cluster:
       sshUser:
         placeholder: e.g. ubuntu
         toolTip: SSH user to login with the selected OS image.
+    kubeconfigSecret:
+        nameRequired: Cluster name is required.
+        error: 'Error generating Harvester kubeconfig secret: {err}'
   haveOneOwner: There must be at least one member with the Owner role.
   import:
     warningBanner: 'You should not import a cluster which has already been connected to another instance of Rancher as it will lead to data corruption.'
@@ -2302,6 +2306,7 @@ cluster:
       server: Server compliance Profile
       agent: Compliance Profile
       override: Allow the default Pod Security Admission Configuration Template to be overridden when using a compliance profile
+      warning: After saving changes, and if this cluster has already been provisioned, please restart the rke2-server service on all nodes to ensure etcd file permissions are correct
     defaultPodSecurityPolicyTemplateName:
       label: Default Pod Security Policy
       option: Default - RKE2 Embedded
@@ -5868,6 +5873,13 @@ secret:
     'kubernetes.io/tls':
       description: Store a certificate and key for TLS
       docLink: https://kubernetes.io/docs/concepts/configuration/secret/#tls-secrets
+  tabs:
+    namespaced:
+      label: Namespaced
+      create: Create Secret
+    projectScoped:
+      label: Project Scoped
+      create: Create Project Secret
 
 selectOrCreateAuthSecret:
   label: Authentication
@@ -6570,6 +6582,11 @@ tableHeaders:
   scope: Scope
   selector: Selector
   secrets: Secrets
+  secret:
+    project-clone: Created by Project Secret
+    project-clone-tooltip: Has a Project Scoped Secret created this Secret in this Namespace
+    project-scoped: Project Secret
+    project-scoped-tooltip: This Project Scoped Secret will create matching Secrets in the Namespaces it contains
   schedule: Schedule
   service: Service
   serviceAccounts: Service Accounts
@@ -7855,6 +7872,11 @@ typeLabel:
       one { Secret }
       other { Secrets }
     }
+  projectsecret: |-
+    {count, plural,
+      one { Project Secret }
+      other { Project Secrets }
+    }
   apiregistration.k8s.io.apiservice: |-
     {count, plural,
       one { APIService }

package/components/CodeMirror.vue

@@ -444,7 +444,7 @@ export default {
         justify-content: center;
         border: 1px solid transparent;
         color: var(--darker);
-        background-color: var(--overlay-bg);
+        background-color: var(--subtle-overlay-bg);
         font-size: 12px;
 
         .close-indicator {

package/components/Drawer/Chrome.vue

@@ -61,7 +61,6 @@ const ariaLabel = computed(() => i18n.t('component.drawer.chrome.ariaLabel.close
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 1000;
 
     display: flex;
     flex-direction: column;

package/components/Drawer/ResourceDetailDrawer/__tests__/composables.test.ts

@@ -26,11 +26,13 @@ describe('composables: ResourceDetailDrawer', () => {
   describe('useDefaultConfigTabProps', () => {
     const hasCustomEdit = jest.fn();
     const importEdit = jest.fn();
+    const hasCustomDetail = jest.fn();
     const editComponent = { component: 'EDIT_COMPONENT' };
     const store: any = {
       getters: {
-        'type-map/hasCustomEdit': hasCustomEdit,
-        'type-map/importEdit':    importEdit
+        'type-map/hasCustomEdit':   hasCustomEdit,
+        'type-map/importEdit':      importEdit,
+        'type-map/hasCustomDetail': hasCustomDetail,
       }
     };
 
@@ -43,13 +45,35 @@ describe('composables: ResourceDetailDrawer', () => {
       expect(props).toBeUndefined();
     });
 
+    it('should return undefined if it does not have a customDetail', async() => {
+      jest.spyOn(vuex, 'useStore').mockImplementation(() => store);
+      const hasCustomEditSpy = hasCustomEdit.mockImplementation(() => true);
+      const hasCustomDetailSpy = hasCustomDetail.mockImplementation(() => false);
+      const props = useDefaultConfigTabProps(resource);
+
+      expect(hasCustomEditSpy).toHaveBeenCalledWith(resource.type);
+      expect(hasCustomDetailSpy).toHaveBeenCalledWith(resource.type);
+      expect(props).toBeUndefined();
+    });
+
+    it('should return undefined if resource disableResourceDetailDrawerConfigTab is true', async() => {
+      jest.spyOn(vuex, 'useStore').mockImplementation(() => store);
+      const hasCustomDetailSpy = hasCustomDetail.mockImplementation(() => false);
+      const props = useDefaultConfigTabProps({ ...resource, disableResourceDetailDrawerConfigTab: true });
+
+      expect(hasCustomDetailSpy).toHaveBeenCalledWith(resource.type);
+      expect(props).toBeUndefined();
+    });
+
     it('should return props if it has a customEdit', async() => {
       jest.spyOn(vuex, 'useStore').mockImplementation(() => store);
       const hasCustomEditSpy = hasCustomEdit.mockImplementation(() => true);
+      const hasCustomDetailSpy = hasCustomDetail.mockImplementation(() => true);
       const importEditSpy = importEdit.mockImplementation(() => editComponent);
       const props = useDefaultConfigTabProps(resource);
 
       expect(hasCustomEditSpy).toHaveBeenCalledWith(resource.type);
+      expect(hasCustomDetailSpy).toHaveBeenCalledWith(resource.type);
       expect(importEditSpy).toHaveBeenCalledWith(resource.type);
       expect(props?.component).toStrictEqual(editComponent);
       expect(props?.resource).toStrictEqual(resource);

package/components/Drawer/ResourceDetailDrawer/composables.ts

@@ -38,7 +38,10 @@ export async function useDefaultYamlTabProps(resource: any): Promise<YamlTabProp
 export function useDefaultConfigTabProps(resource: any): ConfigTabProps | undefined {
   const store = useStore();
 
-  if (!store.getters['type-map/hasCustomEdit'](resource.type)) {
+  // You don't want to show the Config tab if there isn't a an edit page to show and you don't want to show it if there isn't
+  // a detail page because we default to showing the existing edit page if the detail page doesn't exist. Showing them again
+  // wouldn't be worth while.
+  if (!store.getters['type-map/hasCustomEdit'](resource.type) || !store.getters['type-map/hasCustomDetail'](resource.type) || resource.disableResourceDetailDrawerConfigTab) {
     return;
   }
 

package/components/Drawer/ResourceDetailDrawer/index.vue

@@ -68,6 +68,7 @@ const action = computed(() => {
       <Tabbed
         class="tabbed"
         :useHash="false"
+        :showExtensionTabs="false"
         @changed="({selectedName}) => {activeTab = selectedName;}"
       >
         <ConfigTab

package/components/Loading.vue

@@ -59,7 +59,7 @@ export default {
 <style lang="scss" scoped>
   .overlay {
     align-items: center;
-    background-color: var(--overlay-bg);
+    background-color: var(--subtle-overlay-bg);
     display: flex;
     justify-content: center;
     position: absolute;

package/components/PaginatedResourceTable.vue

@@ -36,6 +36,35 @@ export default defineComponent({
       default: null,
     },
 
+    groupTooltip: {
+      type:    String,
+      default: 'resourceTable.groupBy.namespace',
+    },
+
+    /**
+     * Field to group rows by, row[groupBy] must be something that can be a map key (or also use groupSort)
+     */
+    groupBy: {
+      type:    String,
+      default: null,
+    },
+
+    /**
+     * Field to order groups by, defaults to groupBy
+     */
+    groupSort: {
+      type:    String,
+      default: null
+    },
+
+    /**
+     * Override any product based group options
+     */
+    groupOptions: {
+      type:    Array,
+      default: null
+    },
+
     groupable: {
       type:    Boolean,
       default: null, // Null: auto based on namespaced and type custom groupings
@@ -58,6 +87,14 @@ export default defineComponent({
       default: null,
     },
 
+    /**
+     * Use this store instead of the store `inStore` getters
+     */
+    overrideInStore: {
+      type:    String,
+      default: undefined,
+    },
+
     /**
      * Information may be required from resources other than the primary one shown per row
      *
@@ -79,7 +116,7 @@ export default defineComponent({
 
   async fetch() {
     const promises = [
-      this.$fetchType(this.resource, [], this.inStore),
+      this.$fetchType(this.resource, [], this.overrideInStore || this.inStore),
     ];
 
     if (this.fetchSecondaryResources) {
@@ -115,13 +152,21 @@ export default defineComponent({
       :rows="rows"
       :alt-loading="canPaginate && !isFirstLoad"
       :loading="loading"
+
+      :group-by="groupBy"
+      :group-sort="groupSort"
       :groupable="groupable"
+      :groupTooltip="groupTooltip"
+      :groupOptions="groupOptions"
+
+      :override-in-store="overrideInStore"
 
       :headers="safeHeaders"
       :namespaced="namespaced"
 
       :external-pagination-enabled="canPaginate"
       :external-pagination-result="paginationResult"
+
       @pagination-changed="paginationChanged"
     >
       <!-- Pass down templates provided by the caller -->

package/components/PromptRestore.vue

@@ -7,7 +7,7 @@ import Date from '@shell/components/formatter/Date.vue';
 import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
 import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
 import { exceptionToErrorsArray } from '@shell/utils/error';
-import { CAPI, NORMAN, SNAPSHOT } from '@shell/config/types';
+import { CAPI, SNAPSHOT } from '@shell/config/types';
 import { set } from '@shell/utils/object';
 import ChildHook, { BEFORE_SAVE_HOOKS } from '@shell/mixins/child-hook';
 import { DATE_FORMAT, TIME_FORMAT } from '@shell/store/prefs';
@@ -47,14 +47,13 @@ export default {
   },
 
   computed: {
-    // toRestore can be a provisioning.cattle.io.cluster or a rke.cattle.io.etcdsnapshot or an etcdBackup resource
+    // toRestore can be a provisioning.cattle.io.cluster or a rke.cattle.io.etcdsnapshot resource
     ...mapState('action-menu', ['showPromptRestore', 'toRestore']),
     ...mapGetters({ t: 'i18n/t' }),
 
     // Was the dialog opened to restore a specific snapshot, or opened on a cluster to choose
     isCluster() {
-      const isSnapshot = this.toRestore[0]?.type.toLowerCase() === NORMAN.ETCD_BACKUP ||
-      this.toRestore[0]?.type.toLowerCase() === SNAPSHOT;
+      const isSnapshot = this.toRestore[0]?.type.toLowerCase() === SNAPSHOT;
 
       return !isSnapshot;
     },
@@ -79,9 +78,7 @@ export default {
       }
     },
     restoreModeOptions() {
-      const etcdOption = this.isRke2 ? 'none' : 'etcd';
-
-      return [etcdOption, 'kubernetesVersion', 'all'];
+      return ['none', 'kubernetesVersion', 'all'];
     }
   },
 
@@ -112,20 +109,12 @@ export default {
       }
 
       const cluster = this.toRestore?.[0];
-      let promise;
-
-      if (!cluster?.isRke2) {
-        promise = this.$store.dispatch('rancher/findAll', { type: NORMAN.ETCD_BACKUP }).then((snapshots) => {
-          return snapshots.filter((s) => s.state === STATES_ENUM.ACTIVE && s.clusterId === cluster.metadata.name);
-        });
-      } else {
-        promise = this.$store.dispatch('management/findAll', { type: SNAPSHOT }).then((snapshots) => {
-          const toRestoreClusterName = cluster?.clusterName || cluster?.metadata?.name;
+      const promise = this.$store.dispatch('management/findAll', { type: SNAPSHOT }).then((snapshots) => {
+        const toRestoreClusterName = cluster?.clusterName || cluster?.metadata?.name;
 
-          return snapshots.filter((s) => s?.snapshotFile?.status === STATES_ENUM.SUCCESSFUL && s.clusterName === toRestoreClusterName
-          );
-        });
-      }
+        return snapshots.filter((s) => s?.snapshotFile?.status === STATES_ENUM.SUCCESSFUL && s.clusterName === toRestoreClusterName
+        );
+      });
 
       // Map of snapshots by name
       const allSnapshots = await promise.then((snapshots) => {
@@ -154,30 +143,19 @@ export default {
 
     async apply(buttonDone) {
       try {
-        if ( this.isRke2 ) {
-          const cluster = this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, this.snapshot.clusterId);
-
-          await this.applyHooks(BEFORE_SAVE_HOOKS);
-
-          const now = cluster.spec?.rkeConfig?.etcdSnapshotRestore?.generation || 0;
-
-          set(cluster, 'spec.rkeConfig.etcdSnapshotRestore', {
-            generation:       now + 1,
-            name:             this.snapshot.name,
-            restoreRKEConfig: this.restoreMode,
-          });
-
-          await cluster.save();
-        } else {
-          await this.$store.dispatch('rancher/request', {
-            url:    `/v3/clusters/${ escape(this.snapshot.clusterId) }?action=restoreFromEtcdBackup`,
-            method: 'post',
-            data:   {
-              etcdBackupId:     this.snapshot.id,
-              restoreRkeConfig: this.restoreMode,
-            },
-          });
-        }
+        const cluster = this.$store.getters['management/byId'](CAPI.RANCHER_CLUSTER, this.snapshot.clusterId);
+
+        await this.applyHooks(BEFORE_SAVE_HOOKS);
+
+        const now = cluster.spec?.rkeConfig?.etcdSnapshotRestore?.generation || 0;
+
+        set(cluster, 'spec.rkeConfig.etcdSnapshotRestore', {
+          generation:       now + 1,
+          name:             this.snapshot.name,
+          restoreRKEConfig: this.restoreMode,
+        });
+
+        await cluster.save();
 
         this.$store.dispatch('growl/success', {
           title:   this.t('promptRestore.notification.title'),

package/components/Resource/Detail/Metadata/IdentifyingInformation/composable.ts

@@ -3,7 +3,7 @@ import { Row } from '@shell/components/Resource/Detail/Metadata/IdentifyingInfor
 import {
   useCertificate,
   useExpires,
-  useImage, useIssuer, useLiveDate, useNamespace, useReady, useSecretType,
+  useImage, useIssuer, useLiveDate, useNamespace, useProject, useReady, useSecretCluster, useSecretType,
   useServiceAccount
 } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields';
 import { useStore } from 'vuex';
@@ -21,7 +21,11 @@ export const useDefaultIdentifyingInformation = (resource: any): ComputedRef<Row
   });
 };
 
-export const useSecretIdentifyingInformation = (resource: any): ComputedRef<Row[]> => {
+export const useSecretIdentifyingInformation = (resource: any, isProjectSecret: boolean): ComputedRef<Row[]> => {
+  const namespace = isProjectSecret ? undefined : useNamespace(resource);
+  const project = isProjectSecret ? useProject(resource) : undefined;
+  const cluster = isProjectSecret ? useSecretCluster(resource) : undefined;
+  const age = useLiveDate(resource);
   const secretType = useSecretType(resource);
   const serviceAccount = useServiceAccount(resource);
   const certificate = useCertificate(resource);
@@ -30,6 +34,10 @@ export const useSecretIdentifyingInformation = (resource: any): ComputedRef<Row[
 
   return computed(() => {
     const rows = [
+      age?.value,
+      namespace?.value,
+      project?.value,
+      cluster?.value,
       secretType?.value,
       serviceAccount?.value,
       certificate?.value,

package/components/Resource/Detail/Metadata/IdentifyingInformation/identifying-fields.ts

@@ -2,7 +2,9 @@ import { useI18n } from '@shell/composables/useI18n';
 import { computed, ComputedRef, markRaw, toValue } from 'vue';
 import Additional from '@shell/components/Resource/Detail/Additional.vue';
 import { useStore } from 'vuex';
-import { NAMESPACE, FLEET, SERVICE_ACCOUNT } from '@shell/config/types';
+import {
+  NAMESPACE, FLEET, SERVICE_ACCOUNT, SECRET, CAPI
+} from '@shell/config/types';
 import { Row } from '@shell/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue';
 import { NAME as FLEET_NAME } from '@shell/config/product/fleet';
 import { useRoute } from 'vue-router';
@@ -113,7 +115,12 @@ export const useProject = (resource: any): ComputedRef<Row> | undefined => {
   const i18n = useI18n(store);
   const resourceValue = toValue(resource);
 
-  if (resource.type !== NAMESPACE || !resourceValue.project) {
+  // Only show project if one of these types
+  if (resource.type !== NAMESPACE && resource.type !== SECRET) {
+    return;
+  }
+
+  if (!resourceValue.project) {
     return;
   }
 
@@ -126,6 +133,18 @@ export const useProject = (resource: any): ComputedRef<Row> | undefined => {
   });
 };
 
+export const useSecretCluster = (resource: any): ComputedRef<Row> | undefined => {
+  const store = useStore();
+  const resourceValue = toValue(resource);
+
+  return computed(() => {
+    return {
+      label: store.getters['type-map/labelFor']({ id: CAPI.RANCHER_CLUSTER }),
+      value: resourceValue.projectCluster?.nameDisplay,
+    };
+  });
+};
+
 export const useResourceDetails = (resource: any): undefined | ComputedRef<Row[]> => {
   const details = resource.details;
 

package/components/Resource/Detail/Metadata/IdentifyingInformation/index.vue

@@ -34,7 +34,7 @@ const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`
       :data-testid="row.dataTestid"
     >
       <label
-        class="label text-muted"
+        class="label text-deemphasized"
         :for="getRowValueId(row)"
       >
         {{ row.label }}
@@ -95,6 +95,13 @@ const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`
         display: flex;
         flex-direction: row;
         align-items: center;
+
+        &, & * {
+          max-width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
       }
 
       .label {

package/components/Resource/Detail/Metadata/KeyValue.vue

@@ -54,12 +54,12 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
 <template>
   <div class="key-value">
     <div class="heading">
-      <span class="title text-muted">{{ propertyName }}</span>
+      <span class="title text-deemphasized">{{ propertyName }}</span>
       <span class="count">{{ rows.length }}</span>
     </div>
     <div
       v-if="visibleRows.length === 0"
-      class="empty mmt-2 text-muted"
+      class="empty mmt-2 text-deemphasized"
     >
       <div class="no-rows">
         {{ i18n.t('component.resource.detail.metadata.keyValue.noRows', {propertyName: lowercasePropertyName}) }}
@@ -67,7 +67,7 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
       <div class="show-configuration mmt-1">
         <a
           :data-testid="showConfigurationEmptyDataTestId"
-          class="secondary text-muted"
+          class="secondary text-deemphasized"
           href="#"
           @click="(ev: MouseEvent) => {ev.preventDefault(); emit('show-configuration', showConfigurationEmptyFocusSelector);}"
         >
@@ -91,7 +91,7 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
       v-if="showShowAllButton"
       :data-testid="showConfigurationMoreDataTestId"
       href="#"
-      class="show-all secondary"
+      class="show-all"
       @click="(ev: MouseEvent) => {ev.preventDefault(); emit('show-configuration', showConfigurationMoreFocusSelector);}"
     >
       {{ showAllLabel }}
@@ -110,29 +110,31 @@ const showConfigurationMoreFocusSelector = computed(() => `[data-testid="${ show
     }
 
     .heading {
-        margin-bottom: 4px;
+        margin-bottom: 8px;
     }
 
     .row {
+        display: block;
         width: 100%;
 
-        &:not(:first-of-type) {
+        &:not(:nth-child(2)) {
             margin-top: 4px;
         }
-
-        & {
-            margin-top: 8px;
-        }
     }
     .show-all {
         margin-top: 8px;
     }
 
     .rectangle {
+      display: inline-block;
       max-width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
+    .no-rows {
+      line-height: 21px;
+    }
 }
 </style>

package/components/Resource/Detail/Metadata/Rectangle.vue

@@ -23,7 +23,9 @@ const props = withDefaults(
 .rectangle {
     border: 1px solid var(--tag-bg);
     border-radius: 4px;
-    padding: 4px;
+    padding: 0 8px;
+    height: 23px;
+    line-height: 23px;
 
     &:not(.outline) {
         background-color: var(--tag-bg);

package/components/Resource/Detail/SpacedRow.vue

@@ -7,7 +7,7 @@
 <style lang="scss" scoped>
 .spaced-row {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: repeat(3, minmax(0, 1fr));;
   grid-auto-flow: dense;
   grid-gap: 24px;
 }