Repository: Textualize/textual

Issue:
Scrolling in long OptionList doesn't accompany keyboard navigation by default
If you use the keyboard to navigate inside an `OptionList` and if you move past the visible options, there is no scrolling to accompany your movement (there should).

https://github.com/Textualize/textual/assets/5621605/31e02474-b696-40d7-b300-b6348ecddd6d

<details>
<summary>App shown in video</summary>

```py
from textual.app import App, ComposeResult
from textual.widgets import OptionList
from textual.widgets.option_list import Option


class ListApp(App[None]):
    def compose(self) -> ComposeResult:
        yield OptionList(*[Option(f"This is option #{n}") for n in range(100)])


if __name__ == "__main__":
    ListApp().run()
```

</summary>


Discussion:
What's the `height` for this example?
Perhaps [*Why doesn't the DataTable scroll programmatically?*](https://textual.textualize.io/FAQ/#why-doesnt-the-datatable-scroll-programmatically) needs expanding a wee bit?
🤦 
Maybe `OptionList` should come with a `max-height: 100%` by default?
> Maybe `OptionList` should come with a `max-height: 100%` by default?

I thought this fix was simple enough that I could try to help, until I remembered that  `OptionList` has padding/border. 

This might need a fix for percentage dimensions (#4037 or #4023) to land first.

Resolving patch:
diff --git a/src/textual/widgets/_option_list.py b/src/textual/widgets/_option_list.py
--- a/src/textual/widgets/_option_list.py
+++ b/src/textual/widgets/_option_list.py
@@ -177,6 +177,7 @@ class OptionList(ScrollView, can_focus=True):
     DEFAULT_CSS = """
     OptionList {
         height: auto;
+        max-height: 100%;
         background: $boost;
         color: $text;
         overflow-x: hidden;


Test patch:
diff --git a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr
--- a/tests/snapshot_tests/__snapshots__/test_snapshots.ambr
+++ b/tests/snapshot_tests/__snapshots__/test_snapshots.ambr
@@ -25674,6 +25674,165 @@
   
   '''
 # ---
+# name: test_option_list_scrolling_in_long_list
+  '''
+  <svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
+      <!-- Generated with Rich https://www.textualize.io -->
+      <style>
+  
+      @font-face {
+          font-family: "Fira Code";
+          src: local("FiraCode-Regular"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Regular.woff2") format("woff2"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Regular.woff") format("woff");
+          font-style: normal;
+          font-weight: 400;
+      }
+      @font-face {
+          font-family: "Fira Code";
+          src: local("FiraCode-Bold"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff2/FiraCode-Bold.woff2") format("woff2"),
+                  url("https://cdnjs.cloudflare.com/ajax/libs/firacode/6.2.0/woff/FiraCode-Bold.woff") format("woff");
+          font-style: bold;
+          font-weight: 700;
+      }
+  
+      .terminal-1990786949-matrix {
+          font-family: Fira Code, monospace;
+          font-size: 20px;
+          line-height: 24.4px;
+          font-variant-east-asian: full-width;
+      }
+  
+      .terminal-1990786949-title {
+          font-size: 18px;
+          font-weight: bold;
+          font-family: arial;
+      }
+  
+      .terminal-1990786949-r1 { fill: #1e1e1e }
+  .terminal-1990786949-r2 { fill: #0178d4 }
+  .terminal-1990786949-r3 { fill: #c5c8c6 }
+  .terminal-1990786949-r4 { fill: #e2e2e2 }
+  .terminal-1990786949-r5 { fill: #23568b }
+  .terminal-1990786949-r6 { fill: #ddedf9;font-weight: bold }
+      </style>
+  
+      <defs>
+      <clipPath id="terminal-1990786949-clip-terminal">
+        <rect x="0" y="0" width="975.0" height="584.5999999999999" />
+      </clipPath>
+      <clipPath id="terminal-1990786949-line-0">
+      <rect x="0" y="1.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-1">
+      <rect x="0" y="25.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-2">
+      <rect x="0" y="50.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-3">
+      <rect x="0" y="74.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-4">
+      <rect x="0" y="99.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-5">
+      <rect x="0" y="123.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-6">
+      <rect x="0" y="147.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-7">
+      <rect x="0" y="172.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-8">
+      <rect x="0" y="196.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-9">
+      <rect x="0" y="221.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-10">
+      <rect x="0" y="245.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-11">
+      <rect x="0" y="269.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-12">
+      <rect x="0" y="294.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-13">
+      <rect x="0" y="318.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-14">
+      <rect x="0" y="343.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-15">
+      <rect x="0" y="367.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-16">
+      <rect x="0" y="391.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-17">
+      <rect x="0" y="416.3" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-18">
+      <rect x="0" y="440.7" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-19">
+      <rect x="0" y="465.1" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-20">
+      <rect x="0" y="489.5" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-21">
+      <rect x="0" y="513.9" width="976" height="24.65"/>
+              </clipPath>
+  <clipPath id="terminal-1990786949-line-22">
+      <rect x="0" y="538.3" width="976" height="24.65"/>
+              </clipPath>
+      </defs>
+  
+      <rect fill="#292929" stroke="rgba(255,255,255,0.35)" stroke-width="1" x="1" y="1" width="992" height="633.6" rx="8"/><text class="terminal-1990786949-title" fill="#c5c8c6" text-anchor="middle" x="496" y="27">LongOptionListApp</text>
+              <g transform="translate(26,22)">
+              <circle cx="0" cy="0" r="7" fill="#ff5f57"/>
+              <circle cx="22" cy="0" r="7" fill="#febc2e"/>
+              <circle cx="44" cy="0" r="7" fill="#28c840"/>
+              </g>
+          
+      <g transform="translate(9, 41)" clip-path="url(#terminal-1990786949-clip-terminal)">
+      <rect fill="#0178d4" x="0" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="1.5" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="1.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="25.9" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="25.9" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="25.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="25.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="50.3" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="50.3" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="50.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="50.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="74.7" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="74.7" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="74.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="74.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="99.1" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="99.1" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="99.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="99.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="123.5" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="123.5" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="123.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="123.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="147.9" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="147.9" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="147.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="147.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="172.3" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="172.3" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="172.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="172.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="196.7" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="196.7" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="196.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="196.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="221.1" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="221.1" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="221.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="221.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="245.5" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="245.5" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="245.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="245.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="269.9" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="269.9" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="269.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="269.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="294.3" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="294.3" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="294.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="294.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="318.7" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="318.7" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="318.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="318.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="343.1" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="343.1" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="343.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="343.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="367.5" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="367.5" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="367.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="367.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="391.9" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="391.9" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="391.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="391.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="416.3" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="416.3" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="416.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="416.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="440.7" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="440.7" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#14191f" x="927.2" y="440.7" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="440.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="465.1" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="465.1" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="927.2" y="465.1" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="465.1" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="489.5" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="489.5" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="927.2" y="489.5" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="489.5" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="24.4" y="513.9" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="244" y="513.9" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="927.2" y="513.9" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="513.9" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="24.4" y="538.3" width="219.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="244" y="538.3" width="683.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#23568b" x="927.2" y="538.3" width="24.4" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="951.6" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="538.3" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#0178d4" x="0" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/><rect fill="#262626" x="12.2" y="562.7" width="951.6" height="24.65" shape-rendering="crispEdges"/><rect fill="#1e1e1e" x="963.8" y="562.7" width="12.2" height="24.65" shape-rendering="crispEdges"/>
+      <g class="terminal-1990786949-matrix">
+      <text class="terminal-1990786949-r1" x="0" y="20" textLength="12.2" clip-path="url(#terminal-1990786949-line-0)">▊</text><text class="terminal-1990786949-r2" x="12.2" y="20" textLength="951.6" clip-path="url(#terminal-1990786949-line-0)">▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔</text><text class="terminal-1990786949-r2" x="963.8" y="20" textLength="12.2" clip-path="url(#terminal-1990786949-line-0)">▎</text><text class="terminal-1990786949-r3" x="976" y="20" textLength="12.2" clip-path="url(#terminal-1990786949-line-0)">
+  </text><text class="terminal-1990786949-r1" x="0" y="44.4" textLength="12.2" clip-path="url(#terminal-1990786949-line-1)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="44.4" textLength="219.6" clip-path="url(#terminal-1990786949-line-1)">This&#160;is&#160;option&#160;#78</text><text class="terminal-1990786949-r2" x="963.8" y="44.4" textLength="12.2" clip-path="url(#terminal-1990786949-line-1)">▎</text><text class="terminal-1990786949-r3" x="976" y="44.4" textLength="12.2" clip-path="url(#terminal-1990786949-line-1)">
+  </text><text class="terminal-1990786949-r1" x="0" y="68.8" textLength="12.2" clip-path="url(#terminal-1990786949-line-2)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="68.8" textLength="219.6" clip-path="url(#terminal-1990786949-line-2)">This&#160;is&#160;option&#160;#79</text><text class="terminal-1990786949-r2" x="963.8" y="68.8" textLength="12.2" clip-path="url(#terminal-1990786949-line-2)">▎</text><text class="terminal-1990786949-r3" x="976" y="68.8" textLength="12.2" clip-path="url(#terminal-1990786949-line-2)">
+  </text><text class="terminal-1990786949-r1" x="0" y="93.2" textLength="12.2" clip-path="url(#terminal-1990786949-line-3)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="93.2" textLength="219.6" clip-path="url(#terminal-1990786949-line-3)">This&#160;is&#160;option&#160;#80</text><text class="terminal-1990786949-r2" x="963.8" y="93.2" textLength="12.2" clip-path="url(#terminal-1990786949-line-3)">▎</text><text class="terminal-1990786949-r3" x="976" y="93.2" textLength="12.2" clip-path="url(#terminal-1990786949-line-3)">
+  </text><text class="terminal-1990786949-r1" x="0" y="117.6" textLength="12.2" clip-path="url(#terminal-1990786949-line-4)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="117.6" textLength="219.6" clip-path="url(#terminal-1990786949-line-4)">This&#160;is&#160;option&#160;#81</text><text class="terminal-1990786949-r2" x="963.8" y="117.6" textLength="12.2" clip-path="url(#terminal-1990786949-line-4)">▎</text><text class="terminal-1990786949-r3" x="976" y="117.6" textLength="12.2" clip-path="url(#terminal-1990786949-line-4)">
+  </text><text class="terminal-1990786949-r1" x="0" y="142" textLength="12.2" clip-path="url(#terminal-1990786949-line-5)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="142" textLength="219.6" clip-path="url(#terminal-1990786949-line-5)">This&#160;is&#160;option&#160;#82</text><text class="terminal-1990786949-r2" x="963.8" y="142" textLength="12.2" clip-path="url(#terminal-1990786949-line-5)">▎</text><text class="terminal-1990786949-r3" x="976" y="142" textLength="12.2" clip-path="url(#terminal-1990786949-line-5)">
+  </text><text class="terminal-1990786949-r1" x="0" y="166.4" textLength="12.2" clip-path="url(#terminal-1990786949-line-6)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="166.4" textLength="219.6" clip-path="url(#terminal-1990786949-line-6)">This&#160;is&#160;option&#160;#83</text><text class="terminal-1990786949-r2" x="963.8" y="166.4" textLength="12.2" clip-path="url(#terminal-1990786949-line-6)">▎</text><text class="terminal-1990786949-r3" x="976" y="166.4" textLength="12.2" clip-path="url(#terminal-1990786949-line-6)">
+  </text><text class="terminal-1990786949-r1" x="0" y="190.8" textLength="12.2" clip-path="url(#terminal-1990786949-line-7)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="190.8" textLength="219.6" clip-path="url(#terminal-1990786949-line-7)">This&#160;is&#160;option&#160;#84</text><text class="terminal-1990786949-r2" x="963.8" y="190.8" textLength="12.2" clip-path="url(#terminal-1990786949-line-7)">▎</text><text class="terminal-1990786949-r3" x="976" y="190.8" textLength="12.2" clip-path="url(#terminal-1990786949-line-7)">
+  </text><text class="terminal-1990786949-r1" x="0" y="215.2" textLength="12.2" clip-path="url(#terminal-1990786949-line-8)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="215.2" textLength="219.6" clip-path="url(#terminal-1990786949-line-8)">This&#160;is&#160;option&#160;#85</text><text class="terminal-1990786949-r2" x="963.8" y="215.2" textLength="12.2" clip-path="url(#terminal-1990786949-line-8)">▎</text><text class="terminal-1990786949-r3" x="976" y="215.2" textLength="12.2" clip-path="url(#terminal-1990786949-line-8)">
+  </text><text class="terminal-1990786949-r1" x="0" y="239.6" textLength="12.2" clip-path="url(#terminal-1990786949-line-9)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="239.6" textLength="219.6" clip-path="url(#terminal-1990786949-line-9)">This&#160;is&#160;option&#160;#86</text><text class="terminal-1990786949-r2" x="963.8" y="239.6" textLength="12.2" clip-path="url(#terminal-1990786949-line-9)">▎</text><text class="terminal-1990786949-r3" x="976" y="239.6" textLength="12.2" clip-path="url(#terminal-1990786949-line-9)">
+  </text><text class="terminal-1990786949-r1" x="0" y="264" textLength="12.2" clip-path="url(#terminal-1990786949-line-10)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="264" textLength="219.6" clip-path="url(#terminal-1990786949-line-10)">This&#160;is&#160;option&#160;#87</text><text class="terminal-1990786949-r2" x="963.8" y="264" textLength="12.2" clip-path="url(#terminal-1990786949-line-10)">▎</text><text class="terminal-1990786949-r3" x="976" y="264" textLength="12.2" clip-path="url(#terminal-1990786949-line-10)">
+  </text><text class="terminal-1990786949-r1" x="0" y="288.4" textLength="12.2" clip-path="url(#terminal-1990786949-line-11)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="288.4" textLength="219.6" clip-path="url(#terminal-1990786949-line-11)">This&#160;is&#160;option&#160;#88</text><text class="terminal-1990786949-r2" x="963.8" y="288.4" textLength="12.2" clip-path="url(#terminal-1990786949-line-11)">▎</text><text class="terminal-1990786949-r3" x="976" y="288.4" textLength="12.2" clip-path="url(#terminal-1990786949-line-11)">
+  </text><text class="terminal-1990786949-r1" x="0" y="312.8" textLength="12.2" clip-path="url(#terminal-1990786949-line-12)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="312.8" textLength="219.6" clip-path="url(#terminal-1990786949-line-12)">This&#160;is&#160;option&#160;#89</text><text class="terminal-1990786949-r2" x="963.8" y="312.8" textLength="12.2" clip-path="url(#terminal-1990786949-line-12)">▎</text><text class="terminal-1990786949-r3" x="976" y="312.8" textLength="12.2" clip-path="url(#terminal-1990786949-line-12)">
+  </text><text class="terminal-1990786949-r1" x="0" y="337.2" textLength="12.2" clip-path="url(#terminal-1990786949-line-13)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="337.2" textLength="219.6" clip-path="url(#terminal-1990786949-line-13)">This&#160;is&#160;option&#160;#90</text><text class="terminal-1990786949-r2" x="963.8" y="337.2" textLength="12.2" clip-path="url(#terminal-1990786949-line-13)">▎</text><text class="terminal-1990786949-r3" x="976" y="337.2" textLength="12.2" clip-path="url(#terminal-1990786949-line-13)">
+  </text><text class="terminal-1990786949-r1" x="0" y="361.6" textLength="12.2" clip-path="url(#terminal-1990786949-line-14)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="361.6" textLength="219.6" clip-path="url(#terminal-1990786949-line-14)">This&#160;is&#160;option&#160;#91</text><text class="terminal-1990786949-r2" x="963.8" y="361.6" textLength="12.2" clip-path="url(#terminal-1990786949-line-14)">▎</text><text class="terminal-1990786949-r3" x="976" y="361.6" textLength="12.2" clip-path="url(#terminal-1990786949-line-14)">
+  </text><text class="terminal-1990786949-r1" x="0" y="386" textLength="12.2" clip-path="url(#terminal-1990786949-line-15)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="386" textLength="219.6" clip-path="url(#terminal-1990786949-line-15)">This&#160;is&#160;option&#160;#92</text><text class="terminal-1990786949-r2" x="963.8" y="386" textLength="12.2" clip-path="url(#terminal-1990786949-line-15)">▎</text><text class="terminal-1990786949-r3" x="976" y="386" textLength="12.2" clip-path="url(#terminal-1990786949-line-15)">
+  </text><text class="terminal-1990786949-r1" x="0" y="410.4" textLength="12.2" clip-path="url(#terminal-1990786949-line-16)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="410.4" textLength="219.6" clip-path="url(#terminal-1990786949-line-16)">This&#160;is&#160;option&#160;#93</text><text class="terminal-1990786949-r2" x="963.8" y="410.4" textLength="12.2" clip-path="url(#terminal-1990786949-line-16)">▎</text><text class="terminal-1990786949-r3" x="976" y="410.4" textLength="12.2" clip-path="url(#terminal-1990786949-line-16)">
+  </text><text class="terminal-1990786949-r1" x="0" y="434.8" textLength="12.2" clip-path="url(#terminal-1990786949-line-17)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="434.8" textLength="219.6" clip-path="url(#terminal-1990786949-line-17)">This&#160;is&#160;option&#160;#94</text><text class="terminal-1990786949-r2" x="963.8" y="434.8" textLength="12.2" clip-path="url(#terminal-1990786949-line-17)">▎</text><text class="terminal-1990786949-r3" x="976" y="434.8" textLength="12.2" clip-path="url(#terminal-1990786949-line-17)">
+  </text><text class="terminal-1990786949-r1" x="0" y="459.2" textLength="12.2" clip-path="url(#terminal-1990786949-line-18)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="459.2" textLength="219.6" clip-path="url(#terminal-1990786949-line-18)">This&#160;is&#160;option&#160;#95</text><text class="terminal-1990786949-r5" x="927.2" y="459.2" textLength="24.4" clip-path="url(#terminal-1990786949-line-18)">▇▇</text><text class="terminal-1990786949-r2" x="963.8" y="459.2" textLength="12.2" clip-path="url(#terminal-1990786949-line-18)">▎</text><text class="terminal-1990786949-r3" x="976" y="459.2" textLength="12.2" clip-path="url(#terminal-1990786949-line-18)">
+  </text><text class="terminal-1990786949-r1" x="0" y="483.6" textLength="12.2" clip-path="url(#terminal-1990786949-line-19)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="483.6" textLength="219.6" clip-path="url(#terminal-1990786949-line-19)">This&#160;is&#160;option&#160;#96</text><text class="terminal-1990786949-r2" x="963.8" y="483.6" textLength="12.2" clip-path="url(#terminal-1990786949-line-19)">▎</text><text class="terminal-1990786949-r3" x="976" y="483.6" textLength="12.2" clip-path="url(#terminal-1990786949-line-19)">
+  </text><text class="terminal-1990786949-r1" x="0" y="508" textLength="12.2" clip-path="url(#terminal-1990786949-line-20)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="508" textLength="219.6" clip-path="url(#terminal-1990786949-line-20)">This&#160;is&#160;option&#160;#97</text><text class="terminal-1990786949-r2" x="963.8" y="508" textLength="12.2" clip-path="url(#terminal-1990786949-line-20)">▎</text><text class="terminal-1990786949-r3" x="976" y="508" textLength="12.2" clip-path="url(#terminal-1990786949-line-20)">
+  </text><text class="terminal-1990786949-r1" x="0" y="532.4" textLength="12.2" clip-path="url(#terminal-1990786949-line-21)">▊</text><text class="terminal-1990786949-r4" x="24.4" y="532.4" textLength="219.6" clip-path="url(#terminal-1990786949-line-21)">This&#160;is&#160;option&#160;#98</text><text class="terminal-1990786949-r2" x="963.8" y="532.4" textLength="12.2" clip-path="url(#terminal-1990786949-line-21)">▎</text><text class="terminal-1990786949-r3" x="976" y="532.4" textLength="12.2" clip-path="url(#terminal-1990786949-line-21)">
+  </text><text class="terminal-1990786949-r1" x="0" y="556.8" textLength="12.2" clip-path="url(#terminal-1990786949-line-22)">▊</text><text class="terminal-1990786949-r6" x="24.4" y="556.8" textLength="219.6" clip-path="url(#terminal-1990786949-line-22)">This&#160;is&#160;option&#160;#99</text><text class="terminal-1990786949-r2" x="963.8" y="556.8" textLength="12.2" clip-path="url(#terminal-1990786949-line-22)">▎</text><text class="terminal-1990786949-r3" x="976" y="556.8" textLength="12.2" clip-path="url(#terminal-1990786949-line-22)">
+  </text><text class="terminal-1990786949-r1" x="0" y="581.2" textLength="12.2" clip-path="url(#terminal-1990786949-line-23)">▊</text><text class="terminal-1990786949-r2" x="12.2" y="581.2" textLength="951.6" clip-path="url(#terminal-1990786949-line-23)">▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁</text><text class="terminal-1990786949-r2" x="963.8" y="581.2" textLength="12.2" clip-path="url(#terminal-1990786949-line-23)">▎</text>
+      </g>
+      </g>
+  </svg>
+  
+  '''
+# ---
 # name: test_option_list_strings
   '''
   <svg class="rich-terminal" viewBox="0 0 994 635.5999999999999" xmlns="http://www.w3.org/2000/svg">
diff --git a/tests/snapshot_tests/snapshot_apps/option_list_long.py b/tests/snapshot_tests/snapshot_apps/option_list_long.py
new file mode 100644
--- /dev/null
+++ b/tests/snapshot_tests/snapshot_apps/option_list_long.py
@@ -0,0 +1,12 @@
+from textual.app import App, ComposeResult
+from textual.widgets import OptionList
+from textual.widgets.option_list import Option
+
+
+class LongOptionListApp(App[None]):
+    def compose(self) -> ComposeResult:
+        yield OptionList(*[Option(f"This is option #{n}") for n in range(100)])
+
+
+if __name__ == "__main__":
+    LongOptionListApp().run()
diff --git a/tests/snapshot_tests/test_snapshots.py b/tests/snapshot_tests/test_snapshots.py
--- a/tests/snapshot_tests/test_snapshots.py
+++ b/tests/snapshot_tests/test_snapshots.py
@@ -296,6 +296,10 @@ def test_option_list_replace_prompt_from_two_lines_to_three_lines(snap_compare):
     )
 
 
+def test_option_list_scrolling_in_long_list(snap_compare):
+    assert snap_compare(SNAPSHOT_APPS_DIR / "option_list_long.py", press=["up"])
+
+
 def test_progress_bar_indeterminate(snap_compare):
     assert snap_compare(WIDGET_EXAMPLES_DIR / "progress_bar_isolated_.py", press=["f"])