button not showing right under neath a switch

[InfinityALEX]

Hi as the title say the buttons aren't showing right under the switch

here is the code of the modalscreen

class NetworkMenu(ModalScreen):

	CSS_PATH = ['networkmenu.tcss', '../catalogue.tcss']

	def compose(self) -> ComposeResult:
		yield from dependencies.TitleCatalogue("Network")

		if self.app.wifistate == True:
			networksavailable = dependencies.ListAvailableWifi()
		else:
			networksavailable = []

		with Container(id="maincontainernetworkmenu"):
			with Vertical(id="wificontainermenu"):
				yield Vertical(
					Horizontal(
						Switch(id="wifiswitch",animate=False,value=self.app.wifistate),
						Static("Wifi", id="wifistatichori"),
					),
					classes="verticalcontainernetworkmenu",
				)

				with Container(id="verticalcontainerwifimenu"):
					for i, wifi in enumerate(networksavailable, 1):
						yield Button(f"{wifi['Signal']} {wifi['SSID']}", classes="networkwifibutton")


	def on_button_pressed(self, event: Button.Pressed) -> None:
		if event.button.id == "return":
			self.app.pop_screen()

	def on_switch_changed(self, event: Switch.Changed) -> None:
		if event.switch.id == "wifiswitch":
			dependencies.WifiChangeState(self)

here is the tcss

NetworkMenu {
	background: darkblue;
	border: solid white;
}

.networkwifibutton {
	background: gray;
	height: 1;
	content-align: left middle;
	margin: 1;
}

.networkwifibutton:focus {
	background: blue;
}

#wificontainermenu {
	margin: 1;
	height: 50%;
}

#switchcontainer {
    width: 100%;
    height: 3;  /* Ensures switch is fully visible */
    padding: 0;
}

#verticalcontainerwifimenu {
    width: 100%;
    height: 1fr;  /* Takes remaining space */
    overflow: auto;  /* Enables scrolling */
}

#maincontainernetworkmenu {
	margin: 1;
	height: 100%;
	background: black;
}

#wifiswitch {
	height: auto;
	width: auto;
	background: gray;
	border: gray;
}

#wifiswitch:focus {
	background: blue;
	border: blue;
}

#wifistatichori {
	margin: 1;
}

here is what it looks like

[github-actions]

We found the following entries in the FAQ which you may find helpful:

• How do I center a widget in a screen?
• How can I set a translucent app background?

Feel free to close this issue if you found an answer in the FAQ. Otherwise, please give us a little time to review.

This is an automated reply, generated by FAQtory

[TomJGooding]

Vertical and Horizontal are expanding containers, i.e. they are height: 1fr by default.

You might want to try replacing some of your containers with HorzontalGroup and VerticalGroup instead which are non-expanding (i.e. height: auto).

https://textual.textualize.io/api/containers/

[InfinityALEX]

whoa thanks it drove me crazy you just solved 99% of my problems
jokes aside thank you very much

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.