fix minor styling issues

Author: madebyankur

CLAUDE.md

@@ -7,15 +7,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

@@ -5,14 +5,13 @@ description: "Authorization for Retrieval-Augmented Generation (RAG) ensures tha
 
 <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>
 
@@ -61,11 +60,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

@@ -42,7 +42,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,
@@ -64,6 +64,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

@@ -14,14 +14,13 @@ You can securely access external APIs on the user's behalf using Auth0's **Token
 
 <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>
 
@@ -31,8 +30,6 @@ Auth0's Token Vault is a secure service for storing and managing tokens for thir
 
 Token Vault is built on top of [OAuth 2.0 Token Exchange (RFC 8693)](https://www.rfc-editor.org/rfc/rfc8693.html) and supports social and enterprise connections to other Identity Providers (IdPs). There is no need to manage refresh tokens or build custom integrations per provider because Auth0 handles it all for you. You gain access to a wide range of external providers' APIs and services, all through a single Auth0 integration.
 
-
-
 ### Why Is Calling APIs with Token Vault Important for AI agents
 
 Hardcoding API keys or asking users to constantly re-authenticate with these external services is insecure and provides a poor user experience. Token Vault solves this by providing a secure mechanism to store and use the user's credentials (in the form of tokens) for these services.
@@ -69,7 +66,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

@@ -6,14 +6,13 @@ sidebarTitle: Secure User Log In
 
 <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>
   );
-};
+};