fix: hyperlink and lightweight style adjustments (#3708)

- reset `min-width` on hyperlink anchors and buttons
- restore `display: inline-flex` on anchors and buttons

packages/web-components/fast-components/src/anchor/fixtures/anchor.html

@@ -20,17 +20,33 @@ <h4>Accent</h4>
     <h4>Hypertext</h4>
     <fast-anchor href="#" appearance="hypertext">Anchor</fast-anchor>
     <br />
+    <br />
     <fast-anchor appearance="hypertext">Anchor (no href)</fast-anchor>
+
     <p>
         Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ut aliquam quas
         quod ipsam cupiditate, voluptate, corrupti
         <fast-anchor appearance="hypertext" href="#">doloremque totam</fast-anchor>
         dicta perspiciatis commodi consequatur reprehenderit laborum aliquid minima.
         Neque, recusandae. Adipisci.
     </p>
+    <br />
+    <fast-anchor href="https://fast.design" appearance="hypertext">
+        The next anchor is intentionally short, and this anchor is intentionally long
+    </fast-anchor>
+
+    <br />
+    <br />
+    <fast-anchor href="https://fast.design" appearance="hypertext">Hi</fast-anchor>
 
     <h4>Lightweight</h4>
     <fast-anchor href="#" appearance="lightweight">Anchor</fast-anchor>
+    <br />
+    <fast-anchor href="#" appearance="lightweight">
+        The next anchor is intentionally short, and this anchor is intentionally long
+    </fast-anchor>
+    <br />
+    <fast-anchor href="#" appearance="lightweight">Hi</fast-anchor>
 
     <h4>Outline</h4>
     <fast-anchor href="#" appearance="outline">Anchor</fast-anchor>

packages/web-components/fast-components/src/styles/patterns/button.ts

@@ -24,7 +24,7 @@ import {
  * @internal
  */
 export const BaseButtonStyles = css`
-    ${display("inline-block")} :host {
+    ${display("inline-flex")} :host {
         font-family: var(--body-font);
         outline: none;
         font-size: var(--type-ramp-base-font-size);
@@ -86,7 +86,7 @@ export const BaseButtonStyles = css`
     .end,
     ::slotted(svg) {
         ${
-            /* Glyph size and margin-left is temporary - 
+            /* Glyph size and margin-left is temporary -
             replace when adaptive typography is figured out */ ""
         } width: 16px;
         height: 16px;
@@ -146,6 +146,7 @@ export const HypertextStyles = css`
         font-size: inherit;
         line-height: inherit;
         height: auto;
+        min-width: 0;
         background: transparent;
     }