@rancher/shell 3.0.9-rc.4 → 3.0.9-rc.5

package/assets/brand/suse/metadata.json

@@ -8,6 +8,7 @@
     "bannerClass": "suse-login-banner-graphic",
     "logo": "rancher-logo.svg",
     "logoClass": "suse-logo-login",
-    "welcomeLabelKey": "login.login"
+    "welcomeLabelKey": "login.login",
+    "setupLabelKey": "setup.setup"
   }  
 }

package/assets/translations/en-us.yaml

@@ -163,6 +163,9 @@ generic:
   externalIps: External IPs
   internalIps: Internal IPs
   opensInNewTab: Opens in a new tab
+  autogeneratedCreated:
+    title: "{resource} created"
+    message: "{id} has been created."
 
 tabs:
   addItem: Add a new tab item
@@ -307,6 +310,7 @@ nav:
     clusterNotFound: Cluster { clusterId } not found
     productNotFound: Product { productNotFound } not found
     resourceNotFound: Resource type { resource } not found
+    resourceListNotListable: Resource type { resource } cannot be listed
     resourceListNotFound: Resource type { resource } not found, unable to display list
     resourceIdNotFound: Resource { resource } with id { fqid } not found, unable to display resource details
     reload: Reload
@@ -1447,6 +1451,8 @@ changePassword:
     failedToChange: Failed to change password
     failedDeleteKey: Failed to delete key
     failedDeleteKeys: Failed to delete keys
+    cannotChange: This user does not have permissions to change their password
+    cannotFetchSelf: This user does not have permissions to get their user information
 
 chartHeading:
   overview: Overview
@@ -1859,7 +1865,7 @@ cluster:
       acceleratedNetworking:
         label: Accelerated Networking
       availabilitySet:
-        label: Availability Set (unmanaged)
+        label: Availability Set
         description: Availability sets are used to protect applications from hardware failures within an Azure data center.
       availabilityZone:
         label: Availability Zone
@@ -1884,6 +1890,7 @@ cluster:
         label: Location
       managedDisks:
         label: Use Managed Disks
+        deprecationWarning: 'Azure is retiring unmanaged disk support on March 31, 2026. After this date, VMs using unmanaged disks will be stopped and deallocated. Enable "Use Managed Disks" to avoid service disruption.'
       managedDisksSize:
         label: Managed Disk Size
       nsg:
@@ -3112,6 +3119,7 @@ fleet:
       label: Authentication
       git: Git Authentication
       helm: Helm Authentication
+      githubdotcomPasswordBanner: 'GitHub no longer supports password authentication for repositories. Please enter a personal access token with the required permissions instead of your GitHub password.'
     caBundle:
       label: Certificates
       placeholder: "Paste in one or more certificates, starting with -----BEGIN CERTIFICATE----"
@@ -3636,6 +3644,71 @@ import:
     other {# Resources}
     }
 
+auditPolicy:
+  active: Active
+  inactive: Inactive
+  reasons:
+    PolicyNotYetActivated: Not yet activated
+    PolicyIsActive: Active
+    PolicyIsInvalid: Invalid
+    PolicyWasDisabled: Disabled
+  general:
+    title: General
+    enabled:
+      label: Enabled
+      title: Enabled
+      checkbox: Enables this audit policy
+    verbosity:
+      label: Log Verbosity
+      title: Log Verbosity
+      banner: Audit Log Verbosity and install time Audit Log settings are additive.
+      level:
+        0: 0 - Log request and response metadata
+        1: 1 - Log request and response headers
+        2: 2 - Log request body
+        3: 3 - Log response body
+        title: Log Levels
+        label: Level
+        tooltip: Each log level is cumulative, higher log levels include the data from lower levels. Each log entry contains both request and response information.
+      requestResponse:
+        tooltip: Override the Log Level and explicitly include Headers / Body
+      request:
+        title: Request
+        requestHeaders: Request Headers
+        requestBody: Request Body
+      response:
+        title: Response
+        responseHeaders: Response Headers
+        responseBody: Response Body
+  filters:
+    add: Add Filter
+    title: Filters
+    action: 
+      title: Action
+      label: Action
+      allow: Allow
+      deny: Deny
+      placeholder: Allow/Deny
+    requestURI:
+      title: Request URI
+      label: Request URI
+      placeholder: e.g. /foo/.*
+  additionalRedactions:
+    title: Additional Redactions
+    headers:
+      title: Headers
+      label: Headers
+      placeholder: e.g. Cache.*
+      add: Add Header
+    paths:
+      title: Paths
+      label: Paths
+      tooltip: Paths redacts information from request and response bodies based on json path expressions
+      placeholder: e.g. $.gitCommit
+      add: Add Path
+  error:
+      enableOrDisable: "{flag, select, enable {Error when enabling - {id}} disable {Error when disabling - {id}} other {Error - {id}}}"
+      
 ingress:
   description: Ingresses route incoming traffic from the internet to Services within the cluster based on the hostname and path specified in the request. You can expose multiple Services on the same external IP address and port.
   certificates:
@@ -5714,7 +5787,11 @@ promptScaleMachineDown:
   attemptingToRemove: "You are attempting to delete {count} {type}"
   retainedMachine1: At least one Machine must exist for roles Control Plane and Etcd.
   retainedMachine2: <b>{ name }</b> will remain
-
+  scaling: |-
+    {count, plural,
+      =1 {This machine pool is still reconciling. A different node may be deleted instead of the one you selected. It’s best to wait until reconciliation finishes.<br> Do you still want to mark this node for deletion?}
+      other {At least one of these machine pools is still reconciling. Different nodes may be deleted instead of the ones you selected. It’s best to wait until reconciliation finishes.<br> Do you still want to mark these nodes for deletion?}
+    }
 promptSlo:
   title: "Log out"
   text: "Log out of only Rancher, or all {name} applications."
@@ -5932,6 +6009,9 @@ rbac:
         label: Login Access
       clustertemplaterevisions-create:
         label: Create RKE Template Revisions
+      proxy-endpoints-manage:
+        label: Manage Rancher Proxy
+        description: Allows the user to manage settings for proxying HTTP requests via Rancher
   errors:
     escalation: You cannot assign Global Permissions that are higher than your own. Please verify the permissions you are attempting to assign.
 
@@ -6178,6 +6258,7 @@ selectOrCreateAuthSecret:
   basic:
     username: Username
     password: Password
+    passwordPersonalAccessToken: Password/Personal Access Token
   rke:
     info: "An RKE Auth Config secret contains the username and password concatenated and base64 encoded into the secret's 'auth' key"
   namespaceGroup: "Namespace: {name}"
@@ -6332,6 +6413,7 @@ setup:
   useRandom: Use a randomly generated password
   copyRandom: Copy random password to clipboard
   welcome: Welcome to {vendor}!
+  setup: Setup
 
 sortableTable:
   ariaLabel:
@@ -7881,6 +7963,7 @@ typeDescription:
   logging.banzaicloud.io.output: An output defines which logging providers that logs can be sent to. The output needs to be in the same namespace as the flow that is using it.
   group.principal: Assigning global roles to a group only works with external auth providers that support groups. Local authorization does not support groups.
   management.cattle.io.oidcclient: Here you can add applications to Rancher's single sign-on identity provider
+  auditlog.cattle.io.auditpolicy: Define rules that determine which Rancher API events are logged and the level of detail they contain.
 
 typeLabel:
   management.cattle.io.oidcclient: |-
@@ -8033,6 +8116,11 @@ typeLabel:
       one { Resource Quota }
       other { Resource Quotas }
     }
+  auditlog.cattle.io.auditpolicy: |-
+    {count, plural,
+      one { Audit Log Policy }
+      other { Audit Log Policies }
+    }
   # pruh-mee-thee-eyes https://www.prometheus.io/docs/introduction/faq/#what-is-the-plural-of-prometheus
   monitoring.coreos.com.prometheus: |-
     {count, plural,
@@ -9182,7 +9270,7 @@ component:
             events: Events
         extrasCard:
           title: Extras
-          message: 'Consider installing additional <a class="secondary text-deemphasized" href="{extensionsUrl}">extensions</a> and / or <a class="secondary-text-link" href="{clusterToolsUrl}">cluster tools</a> to enrich your Rancher experience.'
+          message: 'Consider installing additional <extensionsLink>extensions</extensionsLink> and / or <clusterToolsLink>cluster tools</clusterToolsLink> to enrich your Rancher experience.'
         scaler:
           ariaLabel:
             increase: Increase {resourceName}

package/components/ActionMenuShell.vue

@@ -97,7 +97,7 @@ const menuOptions = () => {
 <template>
   <rc-dropdown-menu
     :button-variant="buttonVariant || 'link'"
-    :button-size="buttonSize || 'small'"
+    :button-size="buttonSize || 'medium'"
     :button-aria-label="buttonAriaLabel"
     :dropdown-aria-label="dropdownAriaLabel"
     :options="menuOptions()"

package/components/Inactivity.vue

@@ -120,10 +120,10 @@ export default {
 
   methods: {
     async initializeInactivityData() {
-      const canListUserAct = this.$store.getters[`management/canList`](EXT.USER_ACTIVITY);
+      const canGetUserAct = this.$store.getters[`management/canGet`](EXT.USER_ACTIVITY);
       const canListTokens = this.$store.getters[`rancher/canList`](NORMAN.TOKEN);
 
-      if (canListUserAct && canListTokens) {
+      if (canGetUserAct && canListTokens) {
         const tokens = await this.$store.dispatch('rancher/findAll', { type: NORMAN.TOKEN, opt: { watch: false } });
 
         this.tokens = tokens;

package/components/Resource/Detail/Card/ExtrasCard.vue

@@ -3,37 +3,71 @@ import Card from '@shell/components/Resource/Detail/Card/index.vue';
 import { useI18n } from '@shell/composables/useI18n';
 import { useStore } from 'vuex';
 import { BLANK_CLUSTER } from '@shell/store/store-types';
+import { isAdminUser } from '@shell/store/type-map';
+import { DOCS_BASE } from '@shell/config/private-label';
 </script>
 <script setup lang="ts">
-import { useRouter } from 'vue-router';
+import RichTranslation from '@shell/components/RichTranslation.vue';
+import { computed } from 'vue';
 
 const store = useStore();
-const router = useRouter();
 const i18n = useI18n(store);
+const isAdmin = computed(() => isAdminUser(store.getters));
 
-const extensionsUrl = router.resolve({
-  name:   'c-cluster-uiplugins',
-  params: { cluster: BLANK_CLUSTER }
-}).href;
+const extensionsRoute = { name: 'c-cluster-uiplugins', params: { cluster: BLANK_CLUSTER } };
+const extensionsDocsUrl = `${ DOCS_BASE }/integrations-in-rancher/rancher-extensions`;
 
-const clusterToolsUrl = router.resolve({
-  name:   'c-cluster-apps-charts',
-  params: { cluster: BLANK_CLUSTER }
-}).href;
+const clusterToolsRoute = { name: 'c-cluster-explorer-tools' };
+const clusterToolsDocsUrl = `${ DOCS_BASE }/reference-guides/rancher-cluster-tools`;
 </script>
 
 <template>
   <Card :title="i18n.t('component.resource.detail.card.extrasCard.title')">
-    <p
-      v-clean-html="i18n.t('component.resource.detail.card.extrasCard.message', { extensionsUrl, clusterToolsUrl }, true)"
-      class="message text-deemphasized"
-    />
+    <p class="message text-deemphasized">
+      <RichTranslation k="component.resource.detail.card.extrasCard.message">
+        <template #extensionsLink="{ content }">
+          <router-link
+            v-if="isAdmin"
+            class="secondary text-deemphasized"
+            :to="extensionsRoute"
+          >
+            {{ content }}
+          </router-link>
+          <a
+            v-else
+            class="secondary text-deemphasized"
+            :href="extensionsDocsUrl"
+            target="_blank"
+          >
+            {{ content }}
+          </a>
+        </template>
+        <template #clusterToolsLink="{ content }">
+          <router-link
+            v-if="isAdmin"
+            class="secondary-text-link"
+            :to="clusterToolsRoute"
+          >
+            {{ content }}
+          </router-link>
+          <a
+            v-else
+            class="secondary-text-link"
+            :href="clusterToolsDocsUrl"
+            target="_blank"
+          >
+            {{ content }}
+          </a>
+        </template>
+      </RichTranslation>
+    </p>
   </Card>
 </template>
 
 <style lang="scss" scoped>
 .message {
   margin: 0;
-  line-height: 1.5;
+  margin-top: -2px;
+  line-height: 20px;
 }
 </style>

package/components/Resource/Detail/Card/__tests__/ExtrasCard.test.ts

@@ -0,0 +1,111 @@
+import { mount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import ExtrasCard from '@shell/components/Resource/Detail/Card/ExtrasCard.vue';
+import Card from '@shell/components/Resource/Detail/Card/index.vue';
+import RichTranslation from '@shell/components/RichTranslation.vue';
+
+const TRANSLATION_KEY = 'component.resource.detail.card.extrasCard.message';
+const TRANSLATION_VALUE = 'Consider installing additional <extensionsLink>extensions</extensionsLink> and / or <clusterToolsLink>cluster tools</clusterToolsLink> to enrich your Rancher experience.';
+
+jest.mock('@shell/store/type-map', () => ({ isAdminUser: jest.fn() }));
+jest.mock('@shell/config/private-label', () => ({ DOCS_BASE: 'https://docs.example.com' }));
+
+const { isAdminUser } = require('@shell/store/type-map');
+
+function createMockStore() {
+  return createStore({
+    getters: {
+      'i18n/t': () => (key: string) => {
+        if (key === TRANSLATION_KEY) {
+          return TRANSLATION_VALUE;
+        }
+
+        return key;
+      },
+    },
+  });
+}
+
+function mountExtrasCard({ admin = false } = {}) {
+  isAdminUser.mockReturnValue(admin);
+
+  const store = createMockStore();
+
+  return mount(ExtrasCard, {
+    global: {
+      plugins: [store],
+      stubs:   { 'router-link': { template: '<a :href="JSON.stringify(to)" :class="$attrs.class"><slot /></a>', props: ['to'] } },
+    },
+  });
+}
+
+describe('component: ExtrasCard', () => {
+  it('should render the Card component with the correct title', () => {
+    const wrapper = mountExtrasCard();
+    const card = wrapper.findComponent(Card);
+
+    expect(card.exists()).toBe(true);
+    expect(card.props('title')).toStrictEqual('component.resource.detail.card.extrasCard.title');
+  });
+
+  it('should render the RichTranslation component with the correct key', () => {
+    const wrapper = mountExtrasCard();
+    const richTranslation = wrapper.findComponent(RichTranslation);
+
+    expect(richTranslation.exists()).toBe(true);
+    expect(richTranslation.props('k')).toStrictEqual(TRANSLATION_KEY);
+  });
+
+  describe('when user is admin', () => {
+    it('should render router-link for extensions', () => {
+      const wrapper = mountExtrasCard({ admin: true });
+      const links = wrapper.findAll('a');
+      const extensionsLink = links.find((l) => l.text() === 'extensions');
+
+      expect(extensionsLink).toBeDefined();
+      expect(extensionsLink!.classes()).toContain('secondary');
+      expect(extensionsLink!.classes()).toContain('text-deemphasized');
+      expect(extensionsLink!.attributes('href')).toContain('c-cluster-uiplugins');
+    });
+
+    it('should render router-link for cluster tools', () => {
+      const wrapper = mountExtrasCard({ admin: true });
+      const links = wrapper.findAll('a');
+      const clusterToolsLink = links.find((l) => l.text() === 'cluster tools');
+
+      expect(clusterToolsLink).toBeDefined();
+      expect(clusterToolsLink!.classes()).toContain('secondary-text-link');
+      expect(clusterToolsLink!.attributes('href')).toContain('c-cluster-explorer-tools');
+    });
+
+    it('should not render external anchor tags', () => {
+      const wrapper = mountExtrasCard({ admin: true });
+      const anchors = wrapper.findAll('a[target="_blank"]');
+
+      expect(anchors).toHaveLength(0);
+    });
+  });
+
+  describe('when user is not admin', () => {
+    it('should render an external link for extensions', () => {
+      const wrapper = mountExtrasCard({ admin: false });
+      const links = wrapper.findAll('a[target="_blank"]');
+      const extensionsLink = links.find((l) => l.text() === 'extensions');
+
+      expect(extensionsLink).toBeDefined();
+      expect(extensionsLink!.attributes('href')).toStrictEqual('https://docs.example.com/integrations-in-rancher/rancher-extensions');
+      expect(extensionsLink!.classes()).toContain('secondary');
+      expect(extensionsLink!.classes()).toContain('text-deemphasized');
+    });
+
+    it('should render an external link for cluster tools', () => {
+      const wrapper = mountExtrasCard({ admin: false });
+      const links = wrapper.findAll('a[target="_blank"]');
+      const clusterToolsLink = links.find((l) => l.text() === 'cluster tools');
+
+      expect(clusterToolsLink).toBeDefined();
+      expect(clusterToolsLink!.attributes('href')).toStrictEqual('https://docs.example.com/reference-guides/rancher-cluster-tools');
+      expect(clusterToolsLink!.classes()).toContain('secondary-text-link');
+    });
+  });
+});

package/components/Resource/Detail/Masthead/__tests__/index.test.ts

@@ -50,21 +50,4 @@ describe('component: Masthead/index', () => {
 
     expect(cardsComponent.props('resource')).toStrictEqual(mockResource);
   });
-
-  it('should render Cards with mb-20 class', () => {
-    const wrapper = mount(Masthead, {
-      props:  defaultProps,
-      global: {
-        stubs: {
-          TitleBar: true,
-          Metadata: true,
-          Cards:    true
-        }
-      }
-    });
-
-    const cardsComponent = wrapper.findComponent(Cards);
-
-    expect(cardsComponent.classes()).toContain('mb-20');
-  });
 });

package/components/Resource/Detail/Masthead/index.vue

@@ -24,10 +24,11 @@ const props = defineProps<MastheadProps>();
       </template>
     </TitleBar>
     <Metadata
+      class="metadata-section"
       v-bind="props.metadataProps"
     />
     <Cards
-      class="mb-20"
+      class="cards-section"
       :resource="props.titleBarProps.resource"
     />
   </div>
@@ -35,8 +36,14 @@ const props = defineProps<MastheadProps>();
 
 <style lang='scss' scoped>
 .masthead {
-    :deep().metadata {
-        margin-top: 24px;
-    }
+  :deep() .metadata-section {
+    margin-top: 16px;
+    margin-bottom: 24px;
+  }
+
+  .cards-section {
+    margin: 0;
+    margin-bottom: 24px;
+  }
 }
 </style>

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

@@ -103,7 +103,9 @@ const getRowValueId = (row:Row): string => `value-${ row.label }:${ row.value }`
     flex-direction: column;
 
     .row {
-      margin-bottom: 8px;
+      &:not(:last-of-type) {
+        margin-bottom: 8px;
+      }
 
       .full-custom-value {
         flex: 1;

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

@@ -31,7 +31,7 @@ const showBothEmpty = computed(() => labels.length === 0 && annotations.length =
 
 <template>
   <SpacedRow
-    class="metadata ppb-3"
+    class="metadata"
     v-bind="$attrs"
   >
     <div

package/components/Resource/Detail/ResourceRow.vue

@@ -57,7 +57,7 @@ const displayCounts = computed(() => {
         v-if="!counts || counts.length == 0"
         class="text-muted"
       >
-        —
+        0
       </div>
       <div
         v-else

package/components/ResourceDetail/Masthead/latest.vue

@@ -64,11 +64,11 @@ const store = useStore();
     />
     <Metadata
       v-bind="metadataProps"
-      class="mmt-4"
+      class="metadata-section"
     />
     <Cards
       v-if="props.isCustomDetailOrEdit"
-      class="mb-20"
+      class="cards-section"
       :resource="props.value"
     />
   </div>
@@ -79,4 +79,14 @@ const store = useStore();
   margin: 0;
   margin-top: 16px;
 }
+
+:deep() .metadata-section {
+  margin-top: 16px;
+  margin-bottom: 24px;
+}
+
+.cards-section {
+  margin: 0;
+  margin-bottom: 24px;
+}
 </style>

package/components/ResourceList/index.vue

@@ -86,6 +86,15 @@ export default {
     }
   },
 
+  beforeMount() {
+    const inStore = this.$store.getters['currentStore'](this.resource);
+    const canList = this.$store.getters[`${ inStore }/canList`](this.resource);
+
+    if (!canList) {
+      this.$store.dispatch('loadingError', new Error(this.t('nav.failWhale.resourceListNotListable', { resource: this.schema.id }, true)));
+    }
+  },
+
   data() {
     const getters = this.$store.getters;
     const params = { ...this.$route.params };

package/components/ResourceTable.vue

@@ -5,6 +5,7 @@ import { mapPref, GROUP_RESOURCES } from '@shell/store/prefs';
 import ButtonGroup from '@shell/components/ButtonGroup';
 import SortableTable from '@shell/components/SortableTable';
 import { NAMESPACE, AGE } from '@shell/config/table-headers';
+import { COUNT } from '@shell/config/types';
 import { findBy } from '@shell/utils/array';
 import { ExtensionPoint, TableColumnLocation, TableLocation } from '@shell/core/types';
 import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
@@ -238,6 +239,7 @@ export default {
        */
       sortGeneration:               undefined,
       listAutoRefreshToggleEnabled: paginationUtils.listAutoRefreshToggleEnabled({ rootGetters: this.$store.getters }),
+      hasSearchFilter:              false,
     };
   },
 
@@ -600,6 +602,26 @@ export default {
         pluralLabel:   this.$store.getters['type-map/labelFor'](this.schema, 99),
       };
     },
+
+    /**
+     * Get the counts data by namespace for the current resource type
+     */
+    namespaceCounts() {
+      if (!this.inStore || !this.schema?.id) {
+        return {};
+      }
+
+      const counts = this.$store.getters[`${ this.inStore }/all`](COUNT)?.[0]?.counts || {};
+
+      return counts[this.schema.id]?.namespaces || {};
+    },
+
+    /**
+     * Whether we should show namespace counts in group tabs
+     */
+    showNamespaceCounts() {
+      return (this.group === 'namespace' || this.group === 'metadata.namespace') && this.isNamespaced && !this.hasSearchFilter;
+    },
   },
 
   methods: {
@@ -671,6 +693,8 @@ export default {
           }
         });
       }
+
+      this.hasSearchFilter = !!arg?.filtering?.searchQuery;
     }
   }
 };
@@ -750,10 +774,15 @@ export default {
     </template>
 
     <template #group-by="{group: thisGroup}">
-      <div
-        v-clean-html="thisGroup.ref"
-        class="group-tab"
-      />
+      <div class="group-tab">
+        <span v-clean-html="thisGroup.ref" />
+        <span
+          v-if="showNamespaceCounts && Number.isInteger(namespaceCounts[thisGroup.rows?.[0]?.metadata?.namespace]?.count)"
+          class="count"
+        >
+          ({{ namespaceCounts[thisGroup.rows?.[0]?.metadata?.namespace]?.count }})
+        </span>
+      </div>
     </template>
 
     <!-- Pass down templates provided by the caller -->
@@ -799,4 +828,9 @@ export default {
 .auto-update {
   min-width: 150px; height: 40px
 }
+
+.group-tab .count {
+  opacity: 0.7;
+  margin-left: 2px;
+}
 </style>

package/components/Tabbed/Tab.vue

@@ -44,6 +44,10 @@ export default {
       type:    Boolean,
       default: false
     },
+    errorIconTooltip: {
+      type:    String,
+      default: ''
+    },
     badge: {
       default:  0,
       required: false,

package/components/Tabbed/index.vue

@@ -359,7 +359,7 @@ export default {
           >{{ tab.badge }}</span>
           <i
             v-if="hasErrorIcon(tab)"
-            v-clean-tooltip="t('validation.tab')"
+            v-clean-tooltip="tab.errorIconTooltip || t('validation.tab')"
             class="conditions-alert-icon icon-error"
           />
         </a>
@@ -417,11 +417,13 @@ export default {
         :name="tab.name"
         :label="tab.label"
         :label-key="tab.labelKey"
+        :label-icon="tab.labelIcon"
         :weight="tab.weight"
         :tooltip="tab.tooltip"
         :show-header="tab.showHeader"
         :display-alert-icon="tab.displayAlertIcon"
         :error="tab.error"
+        :error-icon-tooltip="tab.errorIconTooltip"
         :badge="tab.badge"
       >
         <component
@@ -504,6 +506,7 @@ export default {
     .conditions-alert-icon {
       color: var(--error);
       padding-left: 4px;
+      margin-left: auto;
     }
 
     &:last-child {