@rancher/shell 3.0.9 → 3.0.11

package/assets/styles/base/_color.scss

@@ -29,3 +29,7 @@ $gray003: #FFF;
 $gray004: #6C6C76;
 $gray005: #4A4B52;
 $gray006: #1b1c21;
+$gray007: #161C24;
+$gray008: #262831;
+$gray009: #6C6C77;
+$gray010: #B6B6C3;

package/assets/styles/themes/_light.scss

@@ -571,17 +571,17 @@
     --rc-success: #{$green001};
     --rc-success-secondary: #{$green002};
 
-    --rc-warning: #{$yellow001};
-    --rc-warning-secondary: #{$yellow002};
+    --rc-warning: #{$yellow002};
+    --rc-warning-secondary: #{$yellow001};
 
     --rc-error: #{$red001};
     --rc-error-secondary: #{$red002};
 
-    --rc-unknown: #{$gray001};
-    --rc-unknown-secondary: #{$gray004};
+    --rc-unknown: #{$gray004};
+    --rc-unknown-secondary: #{$gray001};
 
-    --rc-none: #{$gray002};
-    --rc-none-secondary: #{$gray004};
+    --rc-none: #{$gray004};
+    --rc-none-secondary: #{$gray002};
 
     --rc-primary-hover: #{$blue003};
 

package/assets/styles/themes/_modern.scss

@@ -701,17 +701,17 @@ BODY, .theme-light {
   --rc-success: #{$green001};
   --rc-success-secondary: #{$green002};
 
-  --rc-warning: #{$yellow001};
-  --rc-warning-secondary: #{$yellow002};
+  --rc-warning: #{$yellow002};
+  --rc-warning-secondary: #{$yellow001};
 
   --rc-error: #{$red001};
   --rc-error-secondary: #{$red002};
 
-  --rc-unknown: #{$gray001};
-  --rc-unknown-secondary: #{$gray004};
+  --rc-unknown: #{$gray004};
+  --rc-unknown-secondary: #{$gray001};
 
-  --rc-none: #{$gray002};
-  --rc-none-secondary: #{$gray004};
+  --rc-none: #{$gray004};
+  --rc-none-secondary: #{$gray002};
 
   --rc-primary-hover: #{$blue003};
 
@@ -724,6 +724,10 @@ BODY, .theme-light {
   --rc-disabled-background: #{$gray001};
   --rc-disabled-text-color: #{$gray004};
 
+  --rc-section-background-primary: #{$lightest};
+  --rc-section-background-secondary: #{$lighter};
+  --rc-section-action-color: #{$gray009};
+
   --rc-image-bg: #{$lightest};
   --rc-image-color: #{$darkest};
 
@@ -1068,6 +1072,10 @@ BODY, .theme-dark {
   --rc-disabled-background: #{$gray005};
   --rc-disabled-text-color: #{$gray004};
 
+  --rc-section-background-primary: #{$gray007};
+  --rc-section-background-secondary: #{$gray008};
+  --rc-section-action-color: #{$gray010};
+
   --rc-image-bg: #{$lightest};
   --rc-image-color: #{$darkest};
 

package/assets/translations/en-us.yaml

@@ -30,6 +30,7 @@ generic:
   comma: ', '
   copy: Copy
   copyToClipboard: Copy text to Clipboard
+  copyValueToClipboard: 'Copy {value} to Clipboard'
   copiedToClipboard: Text copied to Clipboard
   create: Create
   created: Created
@@ -438,7 +439,6 @@ accountAndKeys:
     notAllowed: You do not have permission to manage API Keys
     apiEndpoint: "API Endpoint:"
     copyApiEnpoint: Copy API Endpoint to clipboard
-    normanTokenDeprecation: The API Keys feature is being migrated to a new API. Any existing API Keys from the legacy API will continue to work, but new API Keys will be created using the new API.
     add:
       description:
         label: Description
@@ -464,9 +464,7 @@ accountAndKeys:
           month: Months
           year: Years
       scope: Scope
-      userPrincipal: User Principal
       noScope: No Scope
-      enabled: Token enabled
     info:
       accessKey: Access Key
       secretKey: Secret Key
@@ -475,7 +473,7 @@ accountAndKeys:
       keyCreated: A new API Key has been created
       bearerTokenTip: "Access Key and Secret Key can be sent as the username and password for HTTP Basic auth to authorize requests. You can also combine them to use as a Bearer token:"
       ttlLimitedWarning: The Expiry time for this API Key was reduced due to system configuration
-      expiryOptionsWithNever: Since "auth-token-max-ttl-minutes" is set to <= 0, the API Key will not expire unless the "Automatically expire" option is set to "Custom" and a custom expiry time is set.
+
 addClusterMemberDialog:
   title: Add Cluster Member
 
@@ -1020,6 +1018,11 @@ asyncButton:
     waiting: Generating&hellip;
 
 backupRestoreOperator:
+  monitoring:
+    label: Monitoring
+    enableMetrics: Enable Metrics
+    enableServiceMonitor: Enable ServiceMonitor
+    serviceMonitorTooltip: Requires rancher-monitoring to be installed before this can be enabled.
   backup:
     label: Resource Set
     description: The Resource Set determines which resources the backup-restore-operator collects in a backup
@@ -1376,6 +1379,7 @@ catalog:
       releaseName: Release Name
       releaseNamespace: Release Namespace
   repo:
+    add: Add Repository
     action:
       refresh: Refresh
     all: All
@@ -2721,8 +2725,6 @@ cluster:
     v2: RKE2/K3s
   validation:
     iamInstanceProfileName: If the Amazon cloud provider is selected the "IAM Instance Profile Name" must be defined for each Machine Pool
-  capi:
-    notSupported: Managing clusters provisioned using CAPI infrastructure providers via the UI is currently limited to Rancher Turtles provisioned clusters.
 
 clusterIndexPage:
   hardwareResourceGauge:
@@ -5031,6 +5033,7 @@ node:
         cpu: CPU
         memory: MEMORY
         pods: PODS
+        running: Running
       diskPressure: Disk Pressure
       kubelet: kubelet
       memoryPressure: Memory Pressure
@@ -5775,7 +5778,6 @@ projectMembers:
     createNs: Create Namespaces
     configmapsManage: Manage Config Maps
     ingressManage: Manage Ingress
-    projectcatalogsManage: Manage Project Catalogs
     projectroletemplatebindingsManage: Manage Project Members
     secretsManage: Manage Secrets
     serviceaccountsManage: Manage Service Accounts
@@ -5785,7 +5787,6 @@ projectMembers:
     configmapsView: View Config Maps
     ingressView: View Ingress
     monitoringUiView: View Monitoring
-    projectcatalogsView: View Project Catalogs
     projectroletemplatebindingsView: View Project Members
     secretsView: View Secrets
     serviceaccountsView: View Service Accounts
@@ -6857,7 +6858,6 @@ storageClass:
       tooltip: By default the default storage class on the host Harvester cluster is used.
 
 tableHeaders:
-  isLegacy: Legacy
   assuredConcurrencyShares: Assured Concurrency Shares
   autoscaler: Autoscaler
   accessKey: Access Key
@@ -8949,7 +8949,6 @@ performance:
     label: Server-side Pagination
     description: By default Lists will fetch all resources and paginate (create the page given sort and filter settings) locally in the browser. Server-Side Pagination moves this out from the browser to the server. This improves performance of the UI, especially in systems with lots of resources.
     applicable: "Server-side pagination applies to Resource Types"
-    featureFlag: Enabling/Disabling <i class="mr-5">"Server-side Pagination"</i> is now solely done so via the <i class="mr-5">ui-sql-cache</i>&nbsp;<a href="{ffUrl}">Feature Flag</a>
     resources:
       generic: most resources in the cluster's 'More Resources' section
       all: All Resources

package/chart/__tests__/rancher-backup-index.test.ts

@@ -0,0 +1,248 @@
+import { shallowMount } from '@vue/test-utils';
+import RancherBackup from '@shell/chart/rancher-backup/index.vue';
+import { set } from '@shell/utils/object';
+
+describe('rancher-backup: index', () => {
+  const defaultMocks = {
+    $store: {
+      dispatch: jest.fn().mockResolvedValue([]),
+      getters:  {
+        'i18n/t':                    (text: string) => text,
+        t:                           (text: string) => text,
+        'cluster/all':               () => [],
+        'cluster/paginationEnabled': () => false,
+        currentStore:                () => 'cluster',
+        currentCluster:              () => ({ id: 'local' }),
+        getStoreNameByProductId:     'cluster',
+      }
+    },
+    $fetchState: { pending: false }
+  };
+
+  const defaultStubs = {
+    Tab:           { template: '<div><slot /></div>' },
+    Tabbed:        { template: '<div><slot /></div>' },
+    S3:            true,
+    RadioGroup:    true,
+    LabeledInput:  true,
+    LabeledSelect: true,
+    Banner:        true,
+    Checkbox:      true
+  };
+
+  const createWrapper = (propsData = {}, mocks = {}, monitoringInstalled = false) => {
+    return shallowMount(RancherBackup, {
+      props: {
+        value: {},
+        mode:  'create',
+        ...propsData
+      },
+      global: {
+        mocks: {
+          ...defaultMocks,
+          ...mocks
+        },
+        stubs: defaultStubs
+      },
+      computed: {
+        monitoringStatus: () => ({ installed: monitoringInstalled }),
+        radioOptions:     () => ({
+          options: ['none', 's3', 'pickSC', 'pickPV'],
+          labels:  ['None', 'S3', 'Storage Class', 'Persistent Volume']
+        })
+      }
+    });
+  };
+
+  describe('monitoring section initialization', () => {
+    it('should initialize monitoring object with default values when not present', async() => {
+      const value: Record<string, any> = {};
+
+      // Call set directly to test the initialization logic
+      set(value, 'monitoring', {
+        metrics:        { enabled: false },
+        serviceMonitor: { enabled: false }
+      });
+
+      expect(value).toHaveProperty('monitoring');
+      expect(value).toHaveProperty('monitoring.metrics.enabled', false);
+      expect(value).toHaveProperty('monitoring.serviceMonitor.enabled', false);
+    });
+
+    it('should not overwrite existing monitoring values when already set', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: true },
+          serviceMonitor: { enabled: true }
+        }
+      };
+
+      // The fetch logic only sets monitoring if it doesn't exist
+      // Since value.monitoring already exists, it should NOT be overwritten
+      // This test validates the conditional check in the component's fetch()
+      expect(value.monitoring).toBeDefined();
+      expect(value.monitoring.metrics.enabled).toBe(true);
+      expect(value.monitoring.serviceMonitor.enabled).toBe(true);
+    });
+  });
+
+  describe('monitoring checkboxes rendering', () => {
+    it('should render both monitoring checkboxes', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value });
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+
+      expect(checkboxes).toHaveLength(2);
+    });
+
+    it('should pass correct props to metrics checkbox', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: true },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value });
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const metricsCheckbox = checkboxes[0];
+
+      // The t() mock wraps strings in %, so we check for containment
+      expect(metricsCheckbox.attributes('label')).toContain('backupRestoreOperator.monitoring.enableMetrics');
+      expect(metricsCheckbox.attributes('value')).toBe('true');
+    });
+
+    it('should pass correct props to serviceMonitor checkbox', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: true }
+        }
+      };
+      const wrapper = createWrapper({ value });
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const serviceMonitorCheckbox = checkboxes[1];
+
+      expect(serviceMonitorCheckbox.attributes('label')).toContain('backupRestoreOperator.monitoring.enableServiceMonitor');
+      expect(serviceMonitorCheckbox.attributes('value')).toBe('true');
+    });
+  });
+
+  describe('serviceMonitor checkbox disabled state', () => {
+    it('should set disabled to true when monitoring is not installed', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value }, {}, false);
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const serviceMonitorCheckbox = checkboxes[1];
+
+      expect(serviceMonitorCheckbox.attributes('disabled')).toBe('true');
+    });
+
+    it('should not set disabled when monitoring is installed', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value }, {}, true);
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const serviceMonitorCheckbox = checkboxes[1];
+
+      // When monitoring is installed, disabled should be 'false' (string)
+      expect(serviceMonitorCheckbox.attributes('disabled')).toBe('false');
+    });
+  });
+
+  describe('serviceMonitor checkbox tooltip', () => {
+    it('should show tooltip when monitoring is not installed', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value }, {}, false);
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const serviceMonitorCheckbox = checkboxes[1];
+
+      expect(serviceMonitorCheckbox.attributes('tooltip')).toContain('backupRestoreOperator.monitoring.serviceMonitorTooltip');
+    });
+
+    it('should not show tooltip when monitoring is installed', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value }, {}, true);
+
+      const checkboxes = wrapper.findAllComponents({ name: 'Checkbox' });
+      const serviceMonitorCheckbox = checkboxes[1];
+
+      expect(serviceMonitorCheckbox.attributes('tooltip')).toBeFalsy();
+    });
+  });
+
+  describe('metrics checkbox', () => {
+    it('should never be disabled regardless of monitoring status', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+
+      // Test with monitoring not installed
+      const wrapperNotInstalled = createWrapper({ value }, {}, false);
+      const checkboxesNotInstalled = wrapperNotInstalled.findAllComponents({ name: 'Checkbox' });
+      const metricsCheckboxNotInstalled = checkboxesNotInstalled[0];
+
+      // The metrics checkbox does not have a disabled prop bound, so it should be 'false' or undefined
+      const disabledAttr = metricsCheckboxNotInstalled.attributes('disabled');
+
+      expect(disabledAttr === 'false' || disabledAttr === undefined).toBe(true);
+
+      // Test with monitoring installed
+      const wrapperInstalled = createWrapper({ value }, {}, true);
+      const checkboxesInstalled = wrapperInstalled.findAllComponents({ name: 'Checkbox' });
+      const metricsCheckboxInstalled = checkboxesInstalled[0];
+      const disabledAttrInstalled = metricsCheckboxInstalled.attributes('disabled');
+
+      expect(disabledAttrInstalled === 'false' || disabledAttrInstalled === undefined).toBe(true);
+    });
+  });
+
+  describe('monitoring section heading', () => {
+    it('should render the monitoring section heading', async() => {
+      const value = {
+        monitoring: {
+          metrics:        { enabled: false },
+          serviceMonitor: { enabled: false }
+        }
+      };
+      const wrapper = createWrapper({ value });
+
+      const heading = wrapper.find('h3');
+
+      expect(heading.exists()).toBe(true);
+      expect(heading.text()).toContain('backupRestoreOperator.monitoring.label');
+    });
+  });
+});

package/chart/rancher-backup/index.vue

@@ -6,11 +6,13 @@ import { RadioGroup } from '@components/Form/Radio';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Banner } from '@components/Banner';
-import { get } from '@shell/utils/object';
+import { get, set } from '@shell/utils/object';
 import { allHash } from '@shell/utils/promise';
 import { STORAGE_CLASS, PV } from '@shell/config/types';
 import { mapGetters } from 'vuex';
 import { STORAGE } from '@shell/config/labels-annotations';
+import Checkbox from '@components/Form/Checkbox/Checkbox.vue';
+import { monitoringStatus } from '@shell/utils/monitoring';
 
 export default {
   emits: ['valid'],
@@ -22,7 +24,8 @@ export default {
     S3,
     LabeledInput,
     LabeledSelect,
-    Banner
+    Banner,
+    Checkbox
   },
 
   props: {
@@ -39,6 +42,16 @@ export default {
     }
   },
 
+  created() {
+    // Initialize monitoring before template renders to avoid undefined access
+    if (!this.value.monitoring) {
+      set(this.value, 'monitoring', {
+        metrics:        { enabled: false },
+        serviceMonitor: { enabled: false }
+      });
+    }
+  },
+
   async  fetch() {
     const hash = await allHash({
       storageClasses:    this.$store.dispatch('cluster/findAll', { type: STORAGE_CLASS }),
@@ -64,6 +77,8 @@ export default {
   },
 
   computed: {
+    ...monitoringStatus(),
+
     defaultStorageClass() {
       return this.storageClasses.filter((sc) => sc.metadata.annotations?.[STORAGE.DEFAULT_STORAGE_CLASS] && sc.metadata.annotations[STORAGE.DEFAULT_STORAGE_CLASS] !== 'false' )[0] || '';
     },
@@ -248,6 +263,24 @@ export default {
             </div>
           </div>
         </template>
+
+        <h3 class="mb-10 mt-10">
+          {{ t('backupRestoreOperator.monitoring.label') }}
+        </h3>
+        <div class="row monitoring-options">
+          <Checkbox
+            v-model:value="value.monitoring.metrics.enabled"
+            :label="t('backupRestoreOperator.monitoring.enableMetrics')"
+            :mode="mode"
+          />
+          <Checkbox
+            v-model:value="value.monitoring.serviceMonitor.enabled"
+            :label="t('backupRestoreOperator.monitoring.enableServiceMonitor')"
+            :disabled="!monitoringStatus.installed"
+            :tooltip="!monitoringStatus.installed ? t('backupRestoreOperator.monitoring.serviceMonitorTooltip') : null"
+            :mode="mode"
+          />
+        </div>
       </Tab>
     </Tabbed>
   </div>
@@ -257,4 +290,10 @@ export default {
 :deep() .radio-group.label>SPAN {
   font-size: 1em;
 }
+
+.monitoring-options {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
 </style>

package/components/BrandImage.vue

@@ -2,6 +2,7 @@
 import { mapGetters } from 'vuex';
 import { MANAGEMENT } from '@shell/config/types';
 import { SETTING } from '@shell/config/settings';
+import { requireAsset } from '@shell/utils/require-asset';
 
 export default {
   props: {
@@ -72,9 +73,9 @@ export default {
       const themePrefix = this.theme === 'dark' ? 'dark/' : '';
 
       try {
-        return require(`~shell/assets/images/pl/${ themePrefix }${ this.fileName }`);
+        return requireAsset(`~shell/assets/images/pl/${ themePrefix }${ this.fileName }`);
       } catch {
-        return require(`~shell/assets/images/pl/${ this.fileName }`);
+        return requireAsset(`~shell/assets/images/pl/${ this.fileName }`);
       }
     },
 
@@ -95,7 +96,7 @@ export default {
         // csp, rgs, and federal map to SUSE, but have their own custom logos
         if (this.brandBase !== this.brand) {
           try {
-            return require(`~shell/assets/brand/${ this.brandBase }/${ this.isDark ? 'dark/' : '' }${ this.fileName }`);
+            return requireAsset(`~shell/assets/brand/${ this.brandBase }/${ this.isDark ? 'dark/' : '' }${ this.fileName }`);
           } catch { }
         }
       }
@@ -125,11 +126,11 @@ export default {
       } else {
         if (this.isDark || this.dark) {
           try {
-            return require(`~shell/assets/brand/${ this.brand }/dark/${ this.fileName }`);
+            return requireAsset(`~shell/assets/brand/${ this.brand }/dark/${ this.fileName }`);
           } catch {}
         }
         try {
-          return require(`~shell/assets/brand/${ this.brand }/${ this.fileName }`);
+          return requireAsset(`~shell/assets/brand/${ this.brand }/${ this.fileName }`);
         } catch {}
 
         return this.defaultPathToBrandedImage;

package/components/ConsumptionGauge.vue

@@ -54,11 +54,19 @@ export default {
     },
 
     /**
-     * Reduce the vertial height by changed 'Used' for the resource name
+     * Reduce the vertical height by replacing 'Used'/usedLabel with the resource name
      */
     usedAsResourceName: {
-      type:   Boolean,
-      defaut: false
+      type:    Boolean,
+      default: false
+    },
+
+    /**
+     * Override the default "Used" label text (e.g. "Running" for pods).
+     */
+    usedLabel: {
+      type:    String,
+      default: null
     }
   },
   computed: {
@@ -105,7 +113,7 @@ export default {
         <h4 v-if="usedAsResourceName">
           {{ resourceName }}
         </h4>
-        <span v-else>{{ t('node.detail.glance.consumptionGauge.used') }}</span>
+        <span v-else>{{ usedLabel || t('node.detail.glance.consumptionGauge.used') }}</span>
         <span class="numbers-stats">
           {{ t('node.detail.glance.consumptionGauge.amount', amountTemplateValues) }}
           <span class="percentage"><i>/&nbsp;</i>{{ formattedPercentage }}</span>

package/components/CopyToClipboard.vue

@@ -38,7 +38,35 @@ export default {
     success-label="Copied!"
     error-label="Error Copying"
     v-bind="$attrs"
+    :success-color="$attrs['action-color'] || 'role-primary'"
+    :waiting-color="$attrs['action-color'] || 'role-primary'"
     :delay="2000"
     @click="clicked"
   />
 </template>
+
+<style lang="scss" scoped>
+.icon-btn {
+  min-height: 24px;
+  min-width: 24px;
+  justify-content: center;
+}
+
+.bg-transparent {
+  &:active {
+    background-color: var(--primary-keyboard-focus);
+    color: var(--primary-text);
+  }
+
+  &:focus-visible {
+    @include focus-outline;
+  }
+}
+
+.role-primary {
+  &:active {
+    background-color: var(--primary-keyboard-focus);
+    color: var(--primary-text);
+  }
+}
+</style>

package/components/CopyToClipboardText.vue

@@ -75,6 +75,10 @@ export default {
       }
     }
 
+    &:active {
+      color: var(--primary-keyboard-focus);
+    }
+
     &.copied {
       pointer-events: none;
       color: var(--success);

package/components/CruResource.vue

@@ -782,6 +782,7 @@ export default {
         </div>
         <slot name="form-footer">
           <CruResourceFooter
+            v-if="!isView"
             class="cru__footer"
             :mode="mode"
             :is-form="showAsForm"

package/components/DynamicContent/DynamicContentIcon.vue

@@ -7,6 +7,7 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 import { AnnouncementNotificationIconData } from '@shell/utils/dynamic-content/types';
+import { requireAsset } from '@shell/utils/require-asset';
 
 type KeyValues = {
   [key: string]: string;
@@ -49,9 +50,9 @@ const src = computed(() => {
     const themePrefix = theme.value === 'dark' ? 'dark/' : '';
 
     try {
-      return require(`~shell/assets/images/content/${ themePrefix }${ img }`);
+      return requireAsset(`~shell/assets/images/content/${ themePrefix }${ img }`);
     } catch {
-      return require(`~shell/assets/images/content/${ img }`);
+      return requireAsset(`~shell/assets/images/content/${ img }`);
     }
   }
 

package/components/ExplorerProjectsNamespaces.vue

@@ -593,15 +593,12 @@ export default {
 
 .project-namespaces {
   & :deep() {
-    .project-namespaces-table table {
-      table-layout: fixed;
-    }
-
     .project-name {
       line-height: 30px;
     }
 
     .project-bar {
+      contain: inline-size;
       display: flex;
       flex-direction: row;
       justify-content: space-between;