Combined registration experiment mobile polish

fixing some small rendering issues for the combined registration
experiment, mostly the tooltip rendering in the input element

part of:
https://gitlab.com/gitlab-org/gitlab/-/issues/340894

ee/app/assets/javascripts/registrations/groups_projects/new/index.js

+import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import $ from 'jquery';
 import { bindHowToImport } from '~/projects/project_new';
 import { displayGroupPath, displayProjectPath } from './path_display';
@@ -31,12 +32,14 @@ const setAutofocus = () => {
   $('.js-group-project-tabs').on('shown.bs.tab', setInputfocus);
 };
 
+const mobileTooltipOpts = () => (bp.getBreakpointSize() === 'xs' ? { placement: 'bottom' } : {});
+
 export default () => {
   mountProgressBar();
   displayGroupPath('.js-group-path-source', '.js-group-path-display');
   displayGroupPath('.js-import-group-path-source', '.js-import-group-path-display');
   displayProjectPath('.js-project-path-source', '.js-project-path-display');
-  showTooltip('.js-group-name-tooltip');
+  showTooltip('.js-group-name-tooltip', mobileTooltipOpts());
   importButtonsSubmit();
   bindHowToImport();
   setAutofocus();

ee/app/assets/javascripts/registrations/groups_projects/new/show_tooltip.js

 import { initTooltips, add } from '~/tooltips';
 
-export default function showTooltip(tooltipSelector) {
+export default function showTooltip(tooltipSelector, config = {}) {
   const tooltip = document.querySelector(tooltipSelector);
 
   if (!tooltip) return null;
 
   initTooltips({ selector: tooltipSelector });
-  return add([tooltip], { show: true });
+  return add([tooltip], Object.assign(config, { show: true }));
 }

ee/app/views/registrations/groups_projects/new.html.haml

@@ -9,7 +9,7 @@
 
 .row.gl-flex-grow-1
   .gl-display-flex.gl-flex-direction-column.gl-align-items-center.gl-w-full.gl-px-5.gl-pb-5
-    .new-project.gl-display-flex.gl-flex-direction-column.gl-align-items-center
+    .new-project.gl-display-flex.gl-flex-direction-column.gl-align-items-center.gl-xs-w-full
       - unless in_trial_onboarding_flow?
         #progress-bar
       %h2.gl-text-center= _('Create or import your first project')

ee/spec/frontend/registrations/groups_projects/new/index_spec.js

+import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import mountComponents from 'ee/registrations/groups_projects/new';
+import * as showTooltip from 'ee/registrations/groups_projects/new/show_tooltip';
 
-describe('importButtonsSubmit', () => {
+const setup = () => {
   const fixture = `
     <div class="js-import-project-buttons">
       <a href="/import/github">github</a>
@@ -11,10 +13,13 @@ describe('importButtonsSubmit', () => {
       <input type="submit" />
     </form>
   `;
+  setFixtures(fixture);
+  mountComponents();
+};
 
+describe('importButtonsSubmit', () => {
   beforeEach(() => {
-    setFixtures(fixture);
-    mountComponents();
+    setup();
   });
 
   const findSubmit = () => document.querySelector('.js-import-project-form input[type="submit"]');
@@ -28,3 +33,23 @@ describe('importButtonsSubmit', () => {
     expect(submitSpy).toHaveBeenCalled();
   });
 });
+
+describe('mobileTooltipOpts', () => {
+  let showTooltipSpy;
+
+  beforeEach(() => {
+    showTooltipSpy = jest.spyOn(showTooltip, 'default');
+  });
+
+  it('when xs breakpoint size, passes placement options', () => {
+    jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('xs');
+    setup();
+    expect(showTooltipSpy).toHaveBeenCalledWith(expect.any(String), { placement: 'bottom' });
+  });
+
+  it('when not xs breakpoint size, passes emptyt tooltip options', () => {
+    jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('lg');
+    setup();
+    expect(showTooltipSpy).toHaveBeenCalledWith(expect.any(String), {});
+  });
+});

ee/spec/frontend/registrations/groups_projects/new/show_tooltip_spec.js

 import { nextTick } from 'vue';
 import showTooltip from 'ee/registrations/groups_projects/new/show_tooltip';
+import * as tooltips from '~/tooltips';
 
 const fixture = `<div class='my-tooltip' title='this is a tooltip!'></div>`;
 
@@ -16,4 +17,10 @@ describe('showTooltip', () => {
     await nextTick();
     expect(findBodyText()).toBe('this is a tooltip!');
   });
+
+  it('merges config options', () => {
+    const addSpy = jest.spyOn(tooltips, 'add');
+    showTooltip('.my-tooltip', { placement: 'bottom' });
+    expect(addSpy).toHaveBeenCalledWith(expect.any(Array), { placement: 'bottom', show: true });
+  });
 });