feat(ui): ✨ Layout our search results more correctly

src/teilchensammler_cli/main.py

@@ -14,11 +14,12 @@ from textual.widgets import (
     Footer,
     Header,
     Input,
+    Static,
 )
 
 
 @final
-class SearchBar(Widget):
+class SearchBar(Static):
     DEFAULT_CSS = """
     #teilchen-input {
         width: 4fr;
@@ -30,7 +31,7 @@ class SearchBar(Widget):
 
     @override
     def compose(self) -> ComposeResult:
-        with Horizontal(id="search-bar-widget"):
+        with HorizontalGroup(id="search-bar-widget"):
             yield Input(
                 placeholder="Enter Teilchen information: name, description, #tags",
                 tooltip=(
@@ -41,8 +42,17 @@ class SearchBar(Widget):
                 id="teilchen-input",
                 type="text",
             )
-            yield Button("Add", variant="success", id="button-add")
-            yield Button("Search", variant="default", id="button-search")
+            yield Button(
+                "Add", variant="success", classes="search-bar-buttons", id="button-add"
+            )
+            yield Button(
+                "Search",
+                variant="default",
+                classes="search-bar-buttons",
+                id="button-search",
+            )
+
+
 TeilchenDatum = tuple[int, str, str, str, str]
 TeilchenHeader = tuple[
     Literal["pk"],