Adjust runner instructions modal in small screens

This change captures resizes of the runner installation instructions
modal to make it usable on `xs` screens.

Changelog: changed

app/assets/javascripts/vue_shared/components/runner_instructions/runner_instructions_modal.vue

@@ -9,7 +9,9 @@ import {
   GlIcon,
   GlLoadingIcon,
   GlSkeletonLoader,
+  GlResizeObserverDirective,
 } from '@gitlab/ui';
+import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { isEmpty } from 'lodash';
 import { __, s__ } from '~/locale';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
@@ -33,6 +35,9 @@ export default {
     GlSkeletonLoader,
     ModalCopyButton,
   },
+  directives: {
+    GlResizeObserver: GlResizeObserverDirective,
+  },
   props: {
     modalId: {
       type: String,
@@ -87,6 +92,7 @@ export default {
       selectedArchitecture: null,
       showAlert: false,
       instructions: {},
+      platformsButtonGroupVertical: false,
     };
   },
   computed: {
@@ -127,6 +133,13 @@ export default {
     toggleAlert(state) {
       this.showAlert = state;
     },
+    onPlatformsButtonResize() {
+      if (bp.getBreakpointSize() === 'xs') {
+        this.platformsButtonGroupVertical = true;
+      } else {
+        this.platformsButtonGroupVertical = false;
+      }
+    },
   },
   i18n: {
     installARunner: s__('Runners|Install a runner'),
@@ -159,17 +172,23 @@ export default {
       <h5>
         {{ __('Environment') }}
       </h5>
-      <gl-button-group class="gl-mb-3">
+      <div v-gl-resize-observer="onPlatformsButtonResize">
+        <gl-button-group
+          :vertical="platformsButtonGroupVertical"
+          :class="{ 'gl-w-full': platformsButtonGroupVertical }"
+          class="gl-mb-3"
+          data-testid="platform-buttons"
+        >
           <gl-button
             v-for="platform in platforms"
             :key="platform.name"
             :selected="selectedPlatform && selectedPlatform.name === platform.name"
-          data-testid="platform-button"
             @click="selectPlatform(platform)"
           >
             {{ platform.humanReadableName }}
           </gl-button>
         </gl-button-group>
+      </div>
     </template>
     <template v-if="hasArchitecureList">
       <template v-if="selectedPlatform">
@@ -190,7 +209,7 @@ export default {
             {{ architecture.name }}
           </gl-dropdown-item>
         </gl-dropdown>
-        <div class="gl-display-flex gl-align-items-center gl-mb-3">
+        <div class="gl-sm-display-flex gl-align-items-center gl-mb-3">
           <h5>{{ $options.i18n.downloadInstallBinary }}</h5>
           <gl-button
             class="gl-ml-auto"

changelogs/unreleased/327124-runner-installation-modal-should-support-smaller-screens.yml

+---
+title: This change captures resizes of the runner installation instructions modal
+  to make it usable on screens.
+merge_request: 60588
+author:
+type: changed

spec/frontend/vue_shared/components/runner_instructions/runner_instructions_modal_spec.js

-import { GlAlert, GlLoadingIcon, GlSkeletonLoader } from '@gitlab/ui';
+import { GlAlert, GlButton, GlLoadingIcon, GlSkeletonLoader } from '@gitlab/ui';
+import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
@@ -18,6 +19,24 @@ import {
 const localVue = createLocalVue();
 localVue.use(VueApollo);
 
+let resizeCallback;
+const MockResizeObserver = {
+  bind(el, { value }) {
+    resizeCallback = value;
+  },
+  mockResize(size) {
+    bp.getBreakpointSize.mockReturnValue(size);
+    resizeCallback();
+  },
+  unbind() {
+    resizeCallback = null;
+  },
+};
+
+localVue.directive('gl-resize-observer', MockResizeObserver);
+
+jest.mock('@gitlab/ui/dist/utils');
+
 describe('RunnerInstructionsModal component', () => {
   let wrapper;
   let fakeApollo;
@@ -27,7 +46,8 @@ describe('RunnerInstructionsModal component', () => {
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findGlLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findAlert = () => wrapper.findComponent(GlAlert);
-  const findPlatformButtons = () => wrapper.findAllByTestId('platform-button');
+  const findPlatformButtonGroup = () => wrapper.findByTestId('platform-buttons');
+  const findPlatformButtons = () => findPlatformButtonGroup().findAllComponents(GlButton);
   const findArchitectureDropdownItems = () => wrapper.findAllByTestId('architecture-dropdown-item');
   const findBinaryInstructions = () => wrapper.findByTestId('binary-instructions');
   const findRegisterCommand = () => wrapper.findByTestId('register-command');
@@ -141,6 +161,22 @@ describe('RunnerInstructionsModal component', () => {
     });
   });
 
+  describe('when the modal resizes', () => {
+    it('to an xs viewport', async () => {
+      MockResizeObserver.mockResize('xs');
+      await nextTick();
+
+      expect(findPlatformButtonGroup().attributes('vertical')).toBeTruthy();
+    });
+
+    it('to a non-xs viewport', async () => {
+      MockResizeObserver.mockResize('sm');
+      await nextTick();
+
+      expect(findPlatformButtonGroup().props('vertical')).toBeFalsy();
+    });
+  });
+
   describe('when apollo is loading', () => {
     it('should show a skeleton loader', async () => {
       createComponent();