Polish responsive gallery layout and support guidance

SUPPORT.md

@@ -1,8 +1,23 @@
 # Support
 
-The gallery and contributed solutions are community examples. File a GitHub
-issue for site bugs, importer failures, or problems with a specific submission.
-Include the solution slug and the exact validation or browser error.
+## Gallery and submitted solutions
 
-Microsoft product support continues through the normal Power Platform and
-Copilot Studio support channels.
+The gallery and the solutions published through it are community-provided
+example implementations. They are not Microsoft products and are not covered
+by Microsoft Support.
+
+For site bugs, importer failures, or problems with a specific submission,
+search the [existing issues](https://github.com/microsoft/copilot-studio-gallery/issues)
+and open a new issue if the problem has not already been reported. Include the
+solution slug and the exact validation or browser error.
+
+## Underlying Microsoft products
+
+The Microsoft products and features used by these examples, including Power
+Platform and Copilot Studio, continue to be supported through their standard
+support channels. Microsoft Support can help with issues in those underlying
+products and features, but not with issues specific to this gallery or a
+submitted solution.
+
+Use [Power Platform Help + Support](https://learn.microsoft.com/power-platform/admin/get-help-support)
+for product support.

src/components/graph/WorkflowExplorer.tsx

@@ -18,7 +18,7 @@ export default function WorkflowExplorer({ workflows }: { workflows: WorkflowPre
   return (
     <div>
       <div className="mb-3 flex flex-col gap-3 rounded-[0.625rem] border border-border bg-surface p-3 sm:flex-row sm:items-center sm:justify-between">
-        <label className="flex min-w-0 flex-1 items-center gap-3">
+        <label className="flex min-w-0 flex-1 items-center gap-3 overflow-hidden">
           <span className="shrink-0 font-mono text-[11px] font-bold uppercase tracking-[0.12em] text-soft">
             Workflow
           </span>

src/pages/contributors/[contributor].astro

@@ -82,7 +82,7 @@ const tags = collectTags(contributor.solutions);
         </div>
         <p class="text-sm text-muted">{contributor.count} published solution{contributor.count === 1 ? "" : "s"}</p>
       </div>
-      <div class="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-[repeat(auto-fill,minmax(18rem,1fr))]">
+      <div class="mt-5 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
         {contributor.solutions.map((solution) => <SolutionCard solution={solution} />)}
       </div>
     </section>

src/pages/index.astro

@@ -155,11 +155,14 @@ const featuredSolutions = solutions.filter((solution) => solution.data.featured)
 
           <div id="contributor-backdrop" class="fixed inset-0 z-40 hidden bg-black/40 sm:hidden" aria-hidden="true"></div>
           <div class="relative shrink-0">
-            <button type="button" id="contributor-more" aria-expanded="false" aria-haspopup="true" class="inline-flex items-center gap-1.5 rounded-full border border-dashed border-border px-3 py-1.5 text-sm font-medium text-accent transition hover:border-accent">
+            <button type="button" id="contributor-more" aria-expanded="false" aria-haspopup="true" class="relative inline-flex items-center gap-1.5 rounded-full border border-dashed border-border py-1.5 pl-3 pr-10 text-sm font-medium text-accent transition hover:border-accent">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="h-4 w-4" aria-hidden="true">
                 <circle cx="12" cy="8" r="3.25"></circle><path d="M5.5 19.2a6.5 6.5 0 0 1 13 0"></path>
               </svg>
-              Contributors <span id="contributor-count"></span>▾
+              Contributors
+              <span class="absolute right-3 inline-flex w-6 items-center justify-end gap-0.5">
+                <span id="contributor-count"></span><span aria-hidden="true">▾</span>
+              </span>
             </button>
             <div id="contributor-panel" class="fixed inset-x-0 bottom-0 z-50 hidden max-h-[72vh] overflow-y-auto rounded-t-2xl border border-border bg-surface p-4 shadow-2xl sm:absolute sm:inset-x-auto sm:bottom-auto sm:left-0 sm:top-full sm:mt-2 sm:w-80 sm:rounded-xl">
               <div class="mb-3 flex items-center justify-between sm:hidden">
@@ -197,7 +200,7 @@ const featuredSolutions = solutions.filter((solution) => solution.data.featured)
           <span id="tag-chips" class="contents"></span>
         </div>
       </div>
-      <div id="gallery" class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-[repeat(auto-fill,minmax(18rem,1fr))]">
+      <div id="gallery" class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
       {
         solutions.map((solution) => (
           <article
@@ -427,7 +430,7 @@ const featuredSolutions = solutions.filter((solution) => solution.data.featured)
       button.classList.toggle("bg-accent-soft", selected);
       button.querySelector(".contributor-name")?.classList.toggle("text-accent", selected);
     });
-    contributorCount.textContent = activeAuthors.size ? `${activeAuthors.size} ` : "";
+    contributorCount.textContent = activeAuthors.size ? String(activeAuthors.size) : "";
     contributorChips.replaceChildren();
     activeAuthors.forEach((key) => {
       const { name, github } = contributorMeta(key);

src/pages/tags/[tag].astro

@@ -33,7 +33,7 @@ const { tag, solutions } = Astro.props;
     <p class="mt-2 text-muted">
       {solutions.length} solution{solutions.length === 1 ? "" : "s"} tagged “{tag}”.
     </p>
-    <div class="mt-7 grid grid-cols-1 gap-4 sm:grid-cols-[repeat(auto-fill,minmax(18rem,1fr))]">
+    <div class="mt-7 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
       {solutions.map((solution) => <SolutionCard solution={solution} />)}
     </div>
   </main>

src/styles/global.css

@@ -240,7 +240,7 @@ textarea {
 
 @media (min-width: 80rem) {
   .featured-slide {
-    width: calc((100% - 3rem) / 4);
+    width: calc((100% - 2rem) / 3);
   }
 }