fix(react-spinner): ensure intrinsic width to avoid spinner clipping (microsoft#35068)

Co-authored-by: Marcos Moura <[email protected]>

Author: BusraTemizyurek

apps/vr-tests-react-components/src/stories/Spinner.stories.tsx

@@ -112,3 +112,27 @@ export const Animation = () => (
 );
 
 export const AnimationRTL = getStoryVariant(Animation, RTL);
+
+export const SpinnerMinWidth = () => (
+  <div
+    style={{
+      display: 'flex',
+    }}
+  >
+    <Spinner />
+    <span>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed
+      ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam,
+      eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
+      voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
+      voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
+      velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut
+      enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
+      commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
+      consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
+    </span>
+  </div>
+);

change/@fluentui-react-spinner-d18e2cf6-f7ee-44d3-a160-90c58450d4ed.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: set min-width to min-content to prevent spinner clipping",
+  "packageName": "@fluentui/react-spinner",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-spinner/library/src/components/Spinner/useSpinnerStyles.styles.ts

@@ -25,6 +25,7 @@ const useRootBaseClassName = makeResetStyles({
   lineHeight: '0',
   gap: '8px',
   overflow: 'hidden', // prevents height changes from rotating children
+  minWidth: 'min-content',
 });
 
 const useRootStyles = makeStyles({