Fix permissions icon collision with bulleted lists (#56251)

Author: heiskr

src/content-render/stylesheets/markdown-overrides.scss

@@ -37,3 +37,21 @@
     overflow-wrap: break-word;
   }
 }
+
+// Fix for permissions icon collision with bulleted lists
+// When permissions/product statements contain lists that start immediately,
+// the list bullets can visually collide with the icons in the flex layout.
+// This adds proper spacing to prevent the collision while supporting RTL languages
+// and avoiding effects on nested lists.
+// See: https://github.com/github/docs-engineering/issues/5199
+.permissions-statement,
+.product-statement {
+  ul {
+    margin-inline-start: 0;
+    padding-inline-start: 1rem; // Ensure proper spacing from icon (RTL-aware)
+  }
+
+  ul > li {
+    margin-inline-start: 0.5rem; // Additional spacing to prevent bullet collision (direct children only)
+  }
+}

src/frame/components/ui/PermissionsStatement/PermissionsStatement.tsx

@@ -18,13 +18,13 @@ export function PermissionsStatement({ product, permissions }: Props) {
           <h2 className="f4">{t('permissions_callout_title')}</h2>
         </div>
         {permissions && (
-          <div className="d-flex" data-testid="permissions-statement">
+          <div className="d-flex permissions-statement" data-testid="permissions-statement">
             <PersonIcon className="mt-1" />
             <div className="pl-2" dangerouslySetInnerHTML={{ __html: permissions }} />
           </div>
         )}
         {product && (
-          <div className="d-flex" data-testid="product-statement">
+          <div className="d-flex product-statement" data-testid="product-statement">
             <BriefcaseIcon className="mt-1" />
             <div className="pl-2" dangerouslySetInnerHTML={{ __html: product }} />
           </div>