fix minor styling issues

Author: madebyankur

CLAUDE.md

@@ -13,15 +13,15 @@ This process relies on a decoupled authentication flow where the user provides c
 
 <Frame>
   <iframe
-    width="590px"
-    height="330px"
     src="https://play.vidyard.com/tHw62YdhKaUCRrmLheT1dE.html"
     title="Asynchronous authorization with Auth0 for AI Agents"
     frameborder="0"
     allow="accelerometer; autoplay; gyroscope; picture-in-picture; fullscreen"
     referrerpolicy="no-referrer-when-downgrade"
     allowfullscreen
-  />
+    className="aspect-video object-cover w-full h-full"
+/>
+
 </Frame>
 
 ## Use cases for asynchronous authorization

auth4genai/intro/asynchronous-authorization.mdx

@@ -11,14 +11,13 @@ permalink: "/intro/authorization-for-rag"
 
 <Frame>
   <iframe
-    width="590px"
-    height="330px"
     src="https://play.vidyard.com/TCAzaPdj4SEp9yXTbgPP1W.html"
     title="Authorization for RAG using Auth0 FGA"
     frameborder="0"
     allow="accelerometer; autoplay; gyroscope; picture-in-picture; fullscreen"
     referrerpolicy="no-referrer-when-downgrade"
     allowfullscreen
+    className="aspect-video object-cover w-full h-full"
   />
 </Frame>
 
@@ -67,11 +66,11 @@ The process works as follows:
     `document:2024-financials`.
   </Step>
   <Step title="Fetch and filter">
-    When a user submits a query to your AI agent, your backend first
-    fetches relevant documents from a vector database and then makes a
-    permission check call to Auth0 FGA. This call asks, "Is this user allowed to
-    view these documents?". Our AI framework SDKs abstract this and make it as
-    easy as plugging in a filter in your retriever tool.
+    When a user submits a query to your AI agent, your backend first fetches
+    relevant documents from a vector database and then makes a permission check
+    call to Auth0 FGA. This call asks, "Is this user allowed to view these
+    documents?". Our AI framework SDKs abstract this and make it as easy as
+    plugging in a filter in your retriever tool.
   </Step>
   <Step title="Secure retrieval">
     Auth0 FGA determines if the user is authorized to access the documents. Your

auth4genai/intro/authorization-for-rag.mdx

@@ -49,7 +49,7 @@ Follow our [quickstart guides](/get-started/overview) for a step-by-step tutoria
 
 Explore our sample applications and templates
 
-<Columns cols={3}>
+<Columns cols={1}>
   <Card href="https://github.com/auth0-samples/auth0-assistant0" title="Assistant0" vertical>
     A fullstack AI personal assistant with pre-configured tools that
     demonstrates different Auth0 for AI Agents features like User Authentication,
@@ -71,6 +71,7 @@ Explore our sample applications and templates
     Authorization).
 
     `NEXT.JS` `LLAMAINDEX`
+
   </Card>
   <Card href="https://github.com/auth0-samples/auth0-ai-samples" title="AI Samples" vertical>
     Explore our repository of standalone sample applications that showcase

auth4genai/intro/overview.mdx

@@ -22,14 +22,13 @@ Once the external account has been successfully connected, the AI agent can fetc
 
 <Frame>
   <iframe
-    width="590px"
-    height="330px"
     src="https://play.vidyard.com/9A42zhQBXirXUpb43PKKAZ.html"
     title="Calling APIs with Token Vault"
     frameborder="0"
     allow="accelerometer; autoplay; gyroscope; picture-in-picture; fullscreen"
     referrerpolicy="no-referrer-when-downgrade"
     allowfullscreen
+    className="aspect-video object-cover w-full h-full"
   />
 </Frame>
 
@@ -85,7 +84,8 @@ Token Vault supports a variety of social and enterprise identity providers, incl
   title="View All Integrations"
   href="/integrations/overview"
   icon="share-nodes"
-  horizontal />
+  horizontal
+/>
 
 ## Using Token Vault
 

auth4genai/intro/token-vault.mdx

@@ -12,14 +12,13 @@ permalink: "/intro/user-authentication"
 
 <Frame>
   <iframe
-    width="590px"
-    height="330px"
     src="https://play.vidyard.com/cdwosENc4TT1ZhFdJmfKvF.html"
     title="User authentication for AI agents using Auth0"
     frameborder="0"
     allow="accelerometer; autoplay; gyroscope; picture-in-picture; fullscreen"
     referrerpolicy="no-referrer-when-downgrade"
     allowfullscreen
+    className="aspect-video object-cover w-full h-full"
   />
 </Frame>
 

auth4genai/intro/user-authentication.mdx

@@ -1,17 +1,40 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, useRef, useEffect } from "react";
 import { CustomCard } from "/snippets/custom-grid/CustomCard.jsx";
 
 export const SearchAndFilterGrid = ({ items = [], filters = [] }) => {
-
   const fuzzySearch = (needle, haystack) => {
     if (!needle || !haystack) return false;
     const needleLower = needle.toLowerCase();
     const haystackLower = haystack.toLowerCase();
     return haystackLower.includes(needleLower);
-  }
+  };
 
   const [searchTerm, setSearchTerm] = useState("");
   const [filter, setFilter] = useState(null);
+  const filterButtonsRef = useRef(null);
+  const indicatorRef = useRef(null);
+
+  useEffect(() => {
+    if (!filterButtonsRef.current || !indicatorRef.current) return;
+
+    const activeButton = filterButtonsRef.current.querySelector(
+      ".custom-grid-filter-button.active"
+    );
+    const container = filterButtonsRef.current;
+    const indicator = indicatorRef.current;
+
+    if (activeButton) {
+      const containerRect = container.getBoundingClientRect();
+      const buttonRect = activeButton.getBoundingClientRect();
+
+      const left = buttonRect.left - containerRect.left - 2;
+      const width = buttonRect.width;
+
+      indicator.style.transform = `translateX(${left}px)`;
+      indicator.style.width = `${width}px`;
+      indicator.style.opacity = "1";
+    }
+  }, [filter]);
 
   const filteredItems = useMemo(() => {
     let filtered = items;
@@ -28,7 +51,7 @@ export const SearchAndFilterGrid = ({ items = [], filters = [] }) => {
     if (filter) {
       filtered = filtered.filter((item) => item.type === filter);
     }
-    
+
     return filtered;
   }, [searchTerm, filter]);
 
@@ -59,42 +82,76 @@ export const SearchAndFilterGrid = ({ items = [], filters = [] }) => {
               fill="none"
               className="custom-grid-search-icon"
             >
-              <circle cx="11" cy="11" r="8" stroke="currentColor" strokeWidth="2"/>
-              <path d="m21 21-4.35-4.35" stroke="currentColor" strokeWidth="2"/>
+              <circle
+                cx="11"
+                cy="11"
+                r="8"
+                stroke="currentColor"
+                strokeWidth="2"
+              />
+              <path
+                d="m21 21-4.35-4.35"
+                stroke="currentColor"
+                strokeWidth="2"
+              />
             </svg>
           </div>
-          <div className="custom-grid-filter-buttons">
-            <button
-              onClick={() => setFilter(null)}
-              className={`custom-grid-filter-button ${filter === null ? 'active' : ''}`}
-            >
-              All
-            </button>
-            {filters.map((filterOption) => (
+          <div className="custom-grid-filter-buttons-wrapper">
+            <div className="custom-grid-filter-buttons" ref={filterButtonsRef}>
               <button
-                key={filterOption}
-                onClick={() => setFilter(filterOption)}
-                className={`custom-grid-filter-button ${filter === filterOption ? 'active' : ''}`}
+                onClick={() => setFilter(null)}
+                className={`custom-grid-filter-button ${
+                  filter === null ? "active" : ""
+                }`}
               >
-                {filterOption}
+                All
               </button>
-            ))}
+              {filters.map((filterOption) => (
+                <button
+                  key={filterOption}
+                  onClick={() => setFilter(filterOption)}
+                  className={`custom-grid-filter-button ${
+                    filter === filterOption ? "active" : ""
+                  }`}
+                >
+                  {filterOption}
+                </button>
+              ))}
+              <span
+                ref={indicatorRef}
+                className="custom-grid-filter-buttons-indicator"
+              />
+            </div>
           </div>
         </div>
       </div>
 
-      <Columns cols={3}>
+      <Columns cols={2}>
         {sortedItems.map((item) => (
           <CustomCard item={item} key={item.id} />
         ))}
       </Columns>
 
       {sortedItems.length === 0 && (
         <div className="custom-grid-no-results">
-          <div className="custom-grid-no-results-icon">🔍</div>
-          <h3 className="custom-grid-no-results-title">
-            No results found
-          </h3>
+          <div className="custom-grid-no-results-icon">
+            <svg
+              width="40"
+              height="40"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="sc-cpUzJl"
+            >
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M10 2a8 8 0 104.87 14.348l5.423 5.423 1.414-1.415-5.415-5.415A8 8 0 0010 2zm-6 8a6 6 0 1112 0 6 6 0 01-12 0z"
+                fill="currentColor"
+              ></path>
+            </svg>
+          </div>
+          <h3 className="custom-grid-no-results-title">No results found</h3>
           <p className="custom-grid-no-results-text">
             {searchTerm ? `No results for "${searchTerm}". ` : ""}Try adjusting
             your search or filter criteria.
@@ -103,4 +160,4 @@ export const SearchAndFilterGrid = ({ items = [], filters = [] }) => {
       )}
     </div>
   );
-};
+};