fix(settings): make tooltip text start-aligned instead of centered

Because:

* Error tooltip text is centered and should be RTL or LTR

This commit:

* makes tooltip text start-aligned instead of centered and adds a story to showcase the multiline scenario.

* fixes the bug where a tooltip is limited to have half the width of its parent when anchor position is set to middle.

Closes #FXA-11351

Author: MagentaManifold

packages/fxa-settings/src/components/Tooltip/index.stories.tsx

@@ -28,6 +28,17 @@ export const Default = () => (
     <Tooltip message="My tooltip message here" />
   </>
 );
+
+export const MultilineMessage = () => (
+  <>
+    <p>Default tooltip pointing to this text</p>
+    <Tooltip
+      message="This is a very very very very very very long message"
+      anchorPosition="start"
+    />
+  </>
+);
+
 export const Bottom = () => (
   <>
     <p>Default tooltip pointing to this text</p>

packages/fxa-settings/src/components/Tooltip/index.tsx

@@ -49,14 +49,14 @@ export const Tooltip = ({
       data-testid={formatDataTestId('tooltip')}
       aria-live="polite"
       className={classNames(
-        `z-50 absolute py-2 px-6 text-center text-white
+        `z-50 absolute py-2 px-6 text-white
          rounded text-xs font-header font-bold
           shadow-tooltip-grey-drop border-transparent border border-solid
          `,
         type === 'error' ? 'bg-red-600' : 'bg-grey-500',
         className,
         {
-          'ltr:left-1/2 ltr:-translate-x-1/2 rtl:right-1/2 rtl:translate-x-1/2':
+          'ltr:left-1/2 ltr:-translate-x-1/2 rtl:right-1/2 rtl:translate-x-1/2 w-max max-w-full':
             anchorPosition === 'middle',
           'start-0': anchorPosition === 'start',
           'end-0 me-1': anchorPosition === 'end',