diff --git a/src/hosts/tui/app.py b/src/hosts/tui/app.py index c9cad8d..270d707 100644 --- a/src/hosts/tui/app.py +++ b/src/hosts/tui/app.py @@ -93,40 +93,69 @@ class HostsManagerApp(App): right_pane.border_title = "Entry Details" # Details display form (disabled inputs) - with Vertical(id="entry-details-display"): - yield Label("IP Address:") - yield Input( - placeholder="No entry selected", - id="details-ip-input", - disabled=True, - ) - yield Label("Hostnames (comma-separated):") - yield Input( - placeholder="No entry selected", - id="details-hostname-input", - disabled=True, - ) - yield Label("Comment:") - yield Input( - placeholder="No entry selected", - id="details-comment-input", - disabled=True, - ) - yield Checkbox( - "Active", id="details-active-checkbox", disabled=True + with Vertical(id="entry-details-display", classes="entry-form"): + with Vertical(classes="default-section section-no-top-margin") as ip_address: + ip_address.border_title = "IP Address" + yield Input( + placeholder="No entry selected", + id="details-ip-input", + disabled=True, + classes="default-input", + ) + + with Vertical(classes="default-section") as hostnames: + hostnames.border_title = "Hostnames (comma-separated)" + yield Input( + placeholder="No entry selected", + id="details-hostname-input", + disabled=True, + classes="default-input", + ) + + with Vertical(classes="default-section") as comment: + comment.border_title = "Comment:" + yield Input( + placeholder="No entry selected", + id="details-comment-input", + disabled=True, + classes="default-input", ) + with Vertical(classes="default-section") as active: + active.border_title = "Active" + yield Checkbox( + "Active", id="details-active-checkbox", disabled=True, classes="default-checkbox" + ) + # Edit form (initially hidden) - with Vertical(id="entry-edit-form", classes="hidden"): - yield Label("IP Address:") - yield Input(placeholder="Enter IP address", id="ip-input") - yield Label("Hostnames (comma-separated):") - yield Input(placeholder="Enter hostnames", id="hostname-input") - yield Label("Comment:") - yield Input( - placeholder="Enter comment (optional)", id="comment-input" + with Vertical(id="entry-edit-form", classes="entry-form hidden"): + with Vertical(classes="default-section section-no-top-margin") as ip_address: + ip_address.border_title = "IP Address" + yield Input( + placeholder="Enter IP address", + id="ip-input", + classes="default-input", + ) + + with Vertical(classes="default-section") as hostnames: + hostnames.border_title = "Hostnames (comma-separated)" + yield Input( + placeholder="Enter hostnames", + id="hostname-input", + classes="default-input", + ) + + with Vertical(classes="default-section") as comment: + comment.border_title = "Comment:" + yield Input( + placeholder="Enter comment (optional)", + id="comment-input", + classes="default-input", ) - yield Checkbox("Active", id="active-checkbox") + + with Vertical(classes="default-section") as active: + active.border_title = "Active" + yield Checkbox("Active", id="active-checkbox", classes="default-checkbox") # Status bar for error/temporary messages (overlay, doesn't affect layout) yield Static("", id="status-bar", classes="status-bar hidden") diff --git a/src/hosts/tui/styles.py b/src/hosts/tui/styles.py index 495e8e1..c090993 100644 --- a/src/hosts/tui/styles.py +++ b/src/hosts/tui/styles.py @@ -41,6 +41,10 @@ COMMON_CSS = """ .hidden { display: none; } + +.section-no-top-margin { + margin-top: 0 !important; +} """ # CSS styles for the hosts manager application @@ -126,39 +130,11 @@ HOSTS_MANAGER_CSS = ( display: none; } -#entry-edit-form { +.entry-form { height: auto; padding: 1; } -#entry-edit-form Label { - margin-bottom: 1; - color: $accent; - text-style: bold; -} - -#entry-edit-form Input { - margin-bottom: 1; -} - -#entry-edit-form Checkbox { - margin-bottom: 1; -} - -/* Entry details table styling */ -#entry-details-table { - background: $background; - height: auto; -} - -#entry-details-table .datatable--even-row { - background: $background; -} - -#entry-details-table .datatable--odd-row { - background: $surface; -} - Header { height: 1; }