Fix css glitch and navigation in docs

CHANGELOG.md

@@ -19,6 +19,7 @@ No changes to highlight.
 
 ## Full Changelog:
 * Fixed importing gradio can cause PIL.Image.registered_extensions() to break by `[@aliencaocao](https://github.com/aliencaocao)` in `[PR 2846](https://github.com/gradio-app/gradio/pull/2846)`
+* Fix css glitch and navigation in docs by [@aliabd](https://github.com/aliabd) in [PR 2856](https://github.com/gradio-app/gradio/pull/2856)
 
 ## Contributors Shoutout:
 No changes to highlight.

gradio/blocks.py

@@ -352,15 +352,17 @@ def __get__(self, instance, type_):
         return descr_get(instance, type_)
 
 
+set_documentation_group("component-helpers")
+
+
 @document()
 def update(**kwargs) -> dict:
     """
-    Updates component properties.
+    Updates component properties. When a function passed into a Gradio Interface or a Blocks events returns a typical value, it updates the value of the output component. But it is also possible to update the properties of an output component (such as the number of lines of a `Textbox` or the visibility of an `Image`) by returning the component's `update()` function, which takes as parameters any of the constructor parameters for that component.
     This is a shorthand for using the update method on a component.
     For example, rather than using gr.Number.update(...) you can just use gr.update(...).
     Note that your editor's autocompletion will suggest proper parameters
     if you use the update method on the component.
-
     Demos: blocks_essay, blocks_update, blocks_essay_update
 
     Parameters:
@@ -395,6 +397,9 @@ def change_textbox(choice):
     return kwargs
 
 
+set_documentation_group("blocks")
+
+
 def skip() -> dict:
     return update()
 

gradio/components.py

@@ -26,11 +26,11 @@
 import pandas as pd
 import PIL
 import PIL.ImageOps
-from PIL import Image as _Image  # using _ to minimize namespace pollution
 from ffmpy import FFmpeg
 from markdown_it import MarkdownIt
 from mdit_py_plugins.dollarmath import dollarmath_plugin
 from pandas.api.types import is_numeric_dtype
+from PIL import Image as _Image  # using _ to minimize namespace pollution
 
 from gradio import media_data, processing_utils, utils
 from gradio.blocks import Block

gradio/routes.py

@@ -537,7 +537,6 @@ class Request:
     query parameters and other information about the request from within the prediction
     function. The class is a thin wrapper around the fastapi.Request class. Attributes
     of this class include: `headers`, `client`, `query_params`, and `path_params`,
-
     Example:
         import gradio as gr
         def echo(name, request: gr.Request):
@@ -551,6 +550,8 @@ def __init__(self, request: fastapi.Request | None = None, **kwargs):
         """
         Can be instantiated with either a fastapi.Request or by manually passing in
         attributes (needed for websocket-based queueing).
+        Parameters:
+            request: A fastapi.Request
         """
         self.request: fastapi.Request = request
         self.kwargs: Dict = kwargs

website/homepage/src/docs/template.html

@@ -120,7 +120,6 @@
       {% for component in docs["component-helpers"] %}
         <a class="px-4 block thin-link" href="#{{ component['name'].lower() }}">{{ component['name'] }}</a>
       {% endfor %}
-      <a class="thin-link px-4 block" href="#update">Update</a>
       <a class="link px-4 my-2 block" href="#routes">Routes
         {% for component in docs["routes"] %}
           <a class="px-4 block thin-link" href="#{{ component['name'].lower() }}">{{ component['name'] }}</a>
@@ -247,28 +246,14 @@ <h3 class="text-3xl font-light my-4">Block Layouts</h3>
             add common functionality to your app without having to repeatedly create the same components and event listeners.
           </p>
         </div>
-        {% for component in docs["component-helpers"] %}
-          {% with obj=component, is_class=True, parent="gradio" %}
-            {% include "docs/obj_doc_template.html" %}
-          {% endwith %}
-        {% endfor %}
-      </section>
-      <section id="update" class="pt-2 flex flex-col gap-10">
-          <h3 class="text-3xl font-light my-4" id="update-section-header">Update</h3>
-          <p class="mb-12 text-lg">When a function passed into a Gradio Interface or 
-            a Blocks events returns a typical value, it updates the value of the 
-            output component. But it is also possible to update the <em>properties</em> 
-            of an output component (such as the number of lines of a `Textbox` or 
-            the visibility of an `Image`) by returning the component's `update()` function, 
-            which takes as parameters any of the constructor parameters for that component.
-            Here's an example:
-          </p>
-          <div class="flex flex-col gap-10">
-            {% with obj=find_cls("update"), parent="gradio" %}
+        <section class="pt-2">
+          {% for component in docs["component-helpers"] %}
+            {% with obj=component, is_class=True, parent="gradio" %}
               {% include "docs/obj_doc_template.html" %}
             {% endwith %}
-          </div>
+          {% endfor %}
         </section>
+      </section>
         <section id="routes" class="pt-2 flex flex-col gap-10">
           <div>
             <h2 id="routes-header"
@@ -360,8 +345,8 @@ <h3 class="text-3xl font-light my-4" id="update-section-header">Update</h3>
       mainNavLinks.forEach(link => {
         let section = document.querySelector(link.hash);
         if (
-          section.offsetTop <= fromTop*1.01 &&
-          section.offsetTop + section.offsetHeight > fromTop*1.01
+          section.offsetTop <= fromTop &&
+          section.offsetTop + section.offsetHeight > fromTop
         ) {
           link.classList.add("current-nav-link");
         } else {
@@ -379,8 +364,8 @@ <h3 class="text-3xl font-light my-4" id="update-section-header">Update</h3>
         let section = document.querySelector(hash);
 
         if (
-          section.offsetTop <= fromTop*1.01 &&
-          section.offsetTop + section.offsetHeight > fromTop*1.01
+          section.offsetTop <= fromTop &&
+          section.offsetTop + section.offsetHeight > fromTop
         ) {
           subLinkDiv.classList.remove("hidden");
         } else {