prompt: We are currently solving the following issue within our repository. Here is the issue text:
  --- BEGIN ISSUE ---
  [BUG] Header's title text isn't centered properly 
  > Please give a brief but clear explanation of what the issue is. Let us know what the behaviour you expect is, and what is actually happening. Let us know what operating system you are running on, and what terminal you are using.
  
  `Header`'s title text isn't centered, `show_clock=True` exacerbates the issue. My expectation is that the title is centered within the visible space between the icon/clock (if shown), and between the icon/right edge if not.
  
  > Feel free to add screenshots and/or videos. These can be very helpful!
  
  ![image](https://user-images.githubusercontent.com/43392618/198884075-bc981a9b-f41c-4501-86d6-ebe0595656d1.png)
  
  ![image](https://user-images.githubusercontent.com/43392618/198884090-6561b9d0-ba38-4ec0-9aa0-775c0b9ab9d1.png)
  
  ![image](https://user-images.githubusercontent.com/43392618/198884124-ad6cb347-951d-47ed-8920-d4ad2da762af.png)
  
  > If you can, include a complete working example that demonstrates the bug. Please check it can run without modifications.
  
  ```python
  from textual.app import App, ComposeResult
  from textual.widgets import Header, Static
  
  class Demo(App):
      TITLE = "Demonstration"
      CSS = """
      Screen {
          layout: grid;
          grid-size: 2;
      }
      .box {
          height: 100%;
          border: white;
      }
      """
  
      def compose(self) -> ComposeResult:
          yield Header(show_clock=True)
          yield Static(classes="box")
          yield Static(classes="box")
  ```
  
  --- END ISSUE ---
  
  Below are some code segments, each from a relevant file. One or more of these files may contain bugs.
  --- BEGIN FILES ---
  Path: `src/textual/widgets/_header.py`
  Content:
  ```
  1 from __future__ import annotations
  2 
  3 from datetime import datetime
  4 
  5 from rich.text import Text
  6 
  7 from ..widget import Widget
  8 from ..reactive import Reactive, watch
  9 
  10 
  11 class HeaderIcon(Widget):
  12     """Display an 'icon' on the left of the header."""
  13 
  14     DEFAULT_CSS = """
  15     HeaderIcon {
  16         dock: left;
  17         padding: 0 1;
  18         width: 8;
  19         content-align: left middle;
  20     }
  21     """
  22     icon = Reactive("⭘")
  23 
  24     def render(self):
  25         return self.icon
  26 
  27 
  28 class HeaderClock(Widget):
  29     """Display a clock on the right of the header."""
  30 
  31     DEFAULT_CSS = """
  32     HeaderClock {
  33         dock: right;
  34         width: 10;
  35         padding: 0 1;
  36         background: $secondary-background-lighten-1;
  37         color: $text;
  38         text-opacity: 85%;
  39         content-align: center middle;
  40     }
  41     """
  42 
  43     def on_mount(self) -> None:
  44         self.set_interval(1, callback=self.refresh, name=f"update header clock")
  45 
  46     def render(self):
  47         return Text(datetime.now().time().strftime("%X"))
  48 
  49 
  50 class HeaderTitle(Widget):
  51     """Display the title / subtitle in the header."""
  52 
  53     DEFAULT_CSS = """
  54     HeaderTitle {
  55         content-align: center middle;
  56         width: 100%;
  57         margin-right: 10;
  58     }
  59     """
  60 
  61     text: Reactive[str] = Reactive("")
  62     sub_text = Reactive("")
  63 
  64     def render(self) -> Text:
  65         text = Text(self.text, no_wrap=True, overflow="ellipsis")
  66         if self.sub_text:
  67             text.append(" — ")
  68             text.append(self.sub_text, "dim")
  69         return text
  70 
  71 
  72 class Header(Widget):
  73     """A header widget with icon and clock.
  74 
  75     Args:
  76         show_clock (bool, optional): True if the clock should be shown on the right of the header.
  77     """
  78 
  79     DEFAULT_CSS = """
  80     Header {
  81         dock: top;
  82         width: 100%;
  83         background: $secondary-background;
  84         color: $text;
  85         height: 1;
  86     }
  87     Header.-tall {
  88         height: 3;
  89     }
  90     """
  91 
  92     tall = Reactive(False)
  93 
  94     DEFAULT_CLASSES = ""
  95 
  96     def __init__(
  97         self,
  98         show_clock: bool = False,
  99         *,
  100         name: str | None = None,
  101         id: str | None = None,
  102         classes: str | None = None,
  103     ):
  104         super().__init__(name=name, id=id, classes=classes)
  105         self.show_clock = show_clock
  106 
  107     def compose(self):
  108         yield HeaderIcon()
  109         yield HeaderTitle()
  110         if self.show_clock:
  111             yield HeaderClock()
  112 
  113     def watch_tall(self, tall: bool) -> None:
  114         self.set_class(tall, "-tall")
  115 
  116     def on_click(self):
  117         self.toggle_class("-tall")
  118 
  119     def on_mount(self) -> None:
  120         def set_title(title: str) -> None:
  121             self.query_one(HeaderTitle).text = title
  122 
  123         def set_sub_title(sub_title: str) -> None:
  124             self.query_one(HeaderTitle).sub_text = sub_title
  125 
  126         watch(self.app, "title", set_title)
  127         watch(self.app, "sub_title", set_sub_title)
  128
  ```
  --- END FILES ---
  
  Please first localize the bug based on the issue statement, and then generate a patch according to the `git diff` format fenced by three backticks.
  
  Here is an example:
  
  ```diff
  diff --git a/examples/server_async.py b/examples/server_async.py
  --- a/examples/server_async.py
  +++ b/examples/server_async.py
  @@ -313,4 +313,4 @@
   
   
   if __name__ == "__main__":
  -    asyncio.run(run_async_server("."), debug=True)
  +    asyncio.run(run_async_server(), debug=True)
  diff --git a/examples/server_sync.py b/examples/server_sync.py
  --- a/examples/server_sync.py
  +++ b/examples/server_sync.py
  @@ -313,5 +313,5 @@
   
   
   if __name__ == "__main__":
  -    server = run_sync_server(".")
  +    server = run_sync_server()
       server.shutdown()
  
  ```
  
golden_diff: diff --git a/src/textual/widgets/_header.py b/src/textual/widgets/_header.py
  --- a/src/textual/widgets/_header.py
  +++ b/src/textual/widgets/_header.py
  @@ -25,14 +25,26 @@
           return self.icon
   
   
  -class HeaderClock(Widget):
  -    """Display a clock on the right of the header."""
  +class HeaderClockSpace(Widget):
  +    """The space taken up by the clock on the right of the header."""
   
       DEFAULT_CSS = """
  -    HeaderClock {
  +    HeaderClockSpace {
           dock: right;
           width: 10;
           padding: 0 1;
  +    }
  +    """
  +
  +    def render(self) -> str:
  +        return ""
  +
  +
  +class HeaderClock(HeaderClockSpace):
  +    """Display a clock on the right of the header."""
  +
  +    DEFAULT_CSS = """
  +    HeaderClock {
           background: $secondary-background-lighten-1;
           color: $text;
           text-opacity: 85%;
  @@ -54,7 +66,6 @@
       HeaderTitle {
           content-align: center middle;
           width: 100%;
  -        margin-right: 10;
       }
       """
   
  @@ -107,8 +118,7 @@
       def compose(self):
           yield HeaderIcon()
           yield HeaderTitle()
  -        if self.show_clock:
  -            yield HeaderClock()
  +        yield HeaderClock() if self.show_clock else HeaderClockSpace()
   
       def watch_tall(self, tall: bool) -> None:
           self.set_class(tall, "-tall")
  
verification_info: {"golden_diff": "diff --git a/src/textual/widgets/_header.py b/src/textual/widgets/_header.py\n--- a/src/textual/widgets/_header.py\n+++ b/src/textual/widgets/_header.py\n@@ -25,14 +25,26 @@\n         return self.icon\n \n \n-class HeaderClock(Widget):\n-    \"\"\"Display a clock on the right of the header.\"\"\"\n+class HeaderClockSpace(Widget):\n+    \"\"\"The space taken up by the clock on the right of the header.\"\"\"\n \n     DEFAULT_CSS = \"\"\"\n-    HeaderClock {\n+    HeaderClockSpace {\n         dock: right;\n         width: 10;\n         padding: 0 1;\n+    }\n+    \"\"\"\n+\n+    def render(self) -> str:\n+        return \"\"\n+\n+\n+class HeaderClock(HeaderClockSpace):\n+    \"\"\"Display a clock on the right of the header.\"\"\"\n+\n+    DEFAULT_CSS = \"\"\"\n+    HeaderClock {\n         background: $secondary-background-lighten-1;\n         color: $text;\n         text-opacity: 85%;\n@@ -54,7 +66,6 @@\n     HeaderTitle {\n         content-align: center middle;\n         width: 100%;\n-        margin-right: 10;\n     }\n     \"\"\"\n \n@@ -107,8 +118,7 @@\n     def compose(self):\n         yield HeaderIcon()\n         yield HeaderTitle()\n-        if self.show_clock:\n-            yield HeaderClock()\n+        yield HeaderClock() if self.show_clock else HeaderClockSpace()\n \n     def watch_tall(self, tall: bool) -> None:\n         self.set_class(tall, \"-tall\")\n", "issue": "[BUG] Header's title text isn't centered properly \n> Please give a brief but clear explanation of what the issue is. Let us know what the behaviour you expect is, and what is actually happening. Let us know what operating system you are running on, and what terminal you are using.\r\n\r\n`Header`'s title text isn't centered, `show_clock=True` exacerbates the issue. My expectation is that the title is centered within the visible space between the icon/clock (if shown), and between the icon/right edge if not.\r\n\r\n> Feel free to add screenshots and/or videos. These can be very helpful!\r\n\r\n![image](https://user-images.githubusercontent.com/43392618/198884075-bc981a9b-f41c-4501-86d6-ebe0595656d1.png)\r\n\r\n![image](https://user-images.githubusercontent.com/43392618/198884090-6561b9d0-ba38-4ec0-9aa0-775c0b9ab9d1.png)\r\n\r\n![image](https://user-images.githubusercontent.com/43392618/198884124-ad6cb347-951d-47ed-8920-d4ad2da762af.png)\r\n\r\n> If you can, include a complete working example that demonstrates the bug. Please check it can run without modifications.\r\n\r\n```python\r\nfrom textual.app import App, ComposeResult\r\nfrom textual.widgets import Header, Static\r\n\r\nclass Demo(App):\r\n    TITLE = \"Demonstration\"\r\n    CSS = \"\"\"\r\n    Screen {\r\n        layout: grid;\r\n        grid-size: 2;\r\n    }\r\n    .box {\r\n        height: 100%;\r\n        border: white;\r\n    }\r\n    \"\"\"\r\n\r\n    def compose(self) -> ComposeResult:\r\n        yield Header(show_clock=True)\r\n        yield Static(classes=\"box\")\r\n        yield Static(classes=\"box\")\r\n```\n", "before_files": [{"content": "from __future__ import annotations\n\nfrom datetime import datetime\n\nfrom rich.text import Text\n\nfrom ..widget import Widget\nfrom ..reactive import Reactive, watch\n\n\nclass HeaderIcon(Widget):\n    \"\"\"Display an 'icon' on the left of the header.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    HeaderIcon {\n        dock: left;\n        padding: 0 1;\n        width: 8;\n        content-align: left middle;\n    }\n    \"\"\"\n    icon = Reactive(\"\u2b58\")\n\n    def render(self):\n        return self.icon\n\n\nclass HeaderClock(Widget):\n    \"\"\"Display a clock on the right of the header.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    HeaderClock {\n        dock: right;\n        width: 10;\n        padding: 0 1;\n        background: $secondary-background-lighten-1;\n        color: $text;\n        text-opacity: 85%;\n        content-align: center middle;\n    }\n    \"\"\"\n\n    def on_mount(self) -> None:\n        self.set_interval(1, callback=self.refresh, name=f\"update header clock\")\n\n    def render(self):\n        return Text(datetime.now().time().strftime(\"%X\"))\n\n\nclass HeaderTitle(Widget):\n    \"\"\"Display the title / subtitle in the header.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    HeaderTitle {\n        content-align: center middle;\n        width: 100%;\n        margin-right: 10;\n    }\n    \"\"\"\n\n    text: Reactive[str] = Reactive(\"\")\n    sub_text = Reactive(\"\")\n\n    def render(self) -> Text:\n        text = Text(self.text, no_wrap=True, overflow=\"ellipsis\")\n        if self.sub_text:\n            text.append(\" \u2014 \")\n            text.append(self.sub_text, \"dim\")\n        return text\n\n\nclass Header(Widget):\n    \"\"\"A header widget with icon and clock.\n\n    Args:\n        show_clock (bool, optional): True if the clock should be shown on the right of the header.\n    \"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    Header {\n        dock: top;\n        width: 100%;\n        background: $secondary-background;\n        color: $text;\n        height: 1;\n    }\n    Header.-tall {\n        height: 3;\n    }\n    \"\"\"\n\n    tall = Reactive(False)\n\n    DEFAULT_CLASSES = \"\"\n\n    def __init__(\n        self,\n        show_clock: bool = False,\n        *,\n        name: str | None = None,\n        id: str | None = None,\n        classes: str | None = None,\n    ):\n        super().__init__(name=name, id=id, classes=classes)\n        self.show_clock = show_clock\n\n    def compose(self):\n        yield HeaderIcon()\n        yield HeaderTitle()\n        if self.show_clock:\n            yield HeaderClock()\n\n    def watch_tall(self, tall: bool) -> None:\n        self.set_class(tall, \"-tall\")\n\n    def on_click(self):\n        self.toggle_class(\"-tall\")\n\n    def on_mount(self) -> None:\n        def set_title(title: str) -> None:\n            self.query_one(HeaderTitle).text = title\n\n        def set_sub_title(sub_title: str) -> None:\n            self.query_one(HeaderTitle).sub_text = sub_title\n\n        watch(self.app, \"title\", set_title)\n        watch(self.app, \"sub_title\", set_sub_title)\n", "path": "src/textual/widgets/_header.py"}], "after_files": [{"content": "from __future__ import annotations\n\nfrom datetime import datetime\n\nfrom rich.text import Text\n\nfrom ..widget import Widget\nfrom ..reactive import Reactive, watch\n\n\nclass HeaderIcon(Widget):\n    \"\"\"Display an 'icon' on the left of the header.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    HeaderIcon {\n        dock: left;\n        padding: 0 1;\n        width: 8;\n        content-align: left middle;\n    }\n    \"\"\"\n    icon = Reactive(\"\u2b58\")\n\n    def render(self):\n        return self.icon\n\n\nclass HeaderClockSpace(Widget):\n    \"\"\"The space taken up by the clock on the right of the header.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    HeaderClockSpace {\n        dock: right;\n        width: 10;\n        padding: 0 1;\n    }\n    \"\"\"\n\n    def render(self) -> str:\n        return \"\"\n\n\nclass HeaderClock(HeaderClockSpace):\n    \"\"\"Display a clock on the right of the header.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    HeaderClock {\n        background: $secondary-background-lighten-1;\n        color: $text;\n        text-opacity: 85%;\n        content-align: center middle;\n    }\n    \"\"\"\n\n    def on_mount(self) -> None:\n        self.set_interval(1, callback=self.refresh, name=f\"update header clock\")\n\n    def render(self):\n        return Text(datetime.now().time().strftime(\"%X\"))\n\n\nclass HeaderTitle(Widget):\n    \"\"\"Display the title / subtitle in the header.\"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    HeaderTitle {\n        content-align: center middle;\n        width: 100%;\n    }\n    \"\"\"\n\n    text: Reactive[str] = Reactive(\"\")\n    sub_text = Reactive(\"\")\n\n    def render(self) -> Text:\n        text = Text(self.text, no_wrap=True, overflow=\"ellipsis\")\n        if self.sub_text:\n            text.append(\" \u2014 \")\n            text.append(self.sub_text, \"dim\")\n        return text\n\n\nclass Header(Widget):\n    \"\"\"A header widget with icon and clock.\n\n    Args:\n        show_clock (bool, optional): True if the clock should be shown on the right of the header.\n    \"\"\"\n\n    DEFAULT_CSS = \"\"\"\n    Header {\n        dock: top;\n        width: 100%;\n        background: $secondary-background;\n        color: $text;\n        height: 1;\n    }\n    Header.-tall {\n        height: 3;\n    }\n    \"\"\"\n\n    tall = Reactive(False)\n\n    DEFAULT_CLASSES = \"\"\n\n    def __init__(\n        self,\n        show_clock: bool = False,\n        *,\n        name: str | None = None,\n        id: str | None = None,\n        classes: str | None = None,\n    ):\n        super().__init__(name=name, id=id, classes=classes)\n        self.show_clock = show_clock\n\n    def compose(self):\n        yield HeaderIcon()\n        yield HeaderTitle()\n        yield HeaderClock() if self.show_clock else HeaderClockSpace()\n\n    def watch_tall(self, tall: bool) -> None:\n        self.set_class(tall, \"-tall\")\n\n    def on_click(self):\n        self.toggle_class(\"-tall\")\n\n    def on_mount(self) -> None:\n        def set_title(title: str) -> None:\n            self.query_one(HeaderTitle).text = title\n\n        def set_sub_title(sub_title: str) -> None:\n            self.query_one(HeaderTitle).sub_text = sub_title\n\n        watch(self.app, \"title\", set_title)\n        watch(self.app, \"sub_title\", set_sub_title)\n", "path": "src/textual/widgets/_header.py"}]}