Grid Layout Issue: Select Widget Stacking on Small Terminals

[Walterhart]

I have a grid-size: 3 and I am trying to set the column sizes to 2fr 2fr 1fr to make the third column smallest or half the size of the other columns. However, I am having issues with the select widget text stacking on small width terminals. I assume because the text is to long so have to stack. Am I doing something wrong, or is this expected behavior?

Here is my snippet example:

from textual.app import App, ComposeResult
from textual.widgets import Input, Footer, Static, Select
from textual.containers import Container

# Rank Mapping from highest to lowest
RANKS = [
    "Bronze", "Silver", "Gold"
]
RANK_MAP = {rank: i for i, rank in enumerate(reversed(RANKS))}

# Database setup
class OverflowApp(App):
    
    CSS = """
    .container {
        layout: grid;
        grid-size: 3;
        grid-columns: 2fr 2fr 1fr;
        grid-rows: auto;
        grid-gutter:  1 1;
        padding: 1 3;
        width: 100%;
        overflow: auto;
    }

    Input{
        border: wide white;
        padding: 1 0;
        height: auto;
        text-align: center;
        color: white;
    }
    Input:hover,  Select:hover > SelectCurrent, Select:focus > SelectCurrent , Input:focus{
        border: wide  #0178D4;
    }
     Select > SelectCurrent {
        border: wide white;
        padding: 1 0;
        width: 100%;
        height: auto;
     }

    """

    def compose(self) -> ComposeResult: 
        with Container(classes="container"):
            
            username_input = Input(placeholder="Enter your username", id="username", classes="username-border")
            username_input.border_title = "Username"
            yield username_input
           
            user_password = Input(placeholder="Enter your password", id="password", password=True, classes="userpass")
            user_password.border_title ="Password"
            yield  user_password

            userrank_selection = Select([(rank, rank) for rank in RANKS], prompt="Select ", id="rank", classes="selection")
            userrank_selection.border_title="Rank"
            yield userrank_selection

        yield Footer()

    def on_mount(self) -> None:
            user_rank_select = self.query_one("#rank", Select)
            user_rank_current = user_rank_select.query_one("SelectCurrent")
            user_rank_current.border_title ="Rank"  

if __name__ == "__main__":
    app = OverflowApp()
    app.run()

[TomJGooding]

If you don't want the SelectCurrent height to expand, you could just this set this to height: 3 if that's what you mean?

[Walterhart]

Sorry about the confusion. I am not use to using grid. What I am trying to do is make my rank select show it content better when the terminal has a smaller width. Currently nothing is being shown. I am using grid-columns: 2fr 2fr 1fr so the terminal looks the smallest.

[willmcgugan]

You've set the width of your select to be one fifth of the screen. That's not enough space to fit. Did you expect something different there?

[Walterhart]

3