How can I draw a ui.vertical with a background color?

[j-junckes]

I am somewhat struggling with egui, I've looked on the demos, and also searched the discussions, but I can't find what I am looking for.

I am making a custom widget for our project, and what I am trying to implement is a recent projects modal, however I am running into an issue with the way ui.vertical works, as it returns an InnerResponse. Calling an ui.painter.rect_filled() doesn't work either as by that time the vertical is already rendered.

Code I currently have:

#[must_use = "You should put this widget in a ui with `ui.add(widget);`"]
pub struct SelectModalItem {
    selected: bool,
    title: WidgetText,
    description: Option<WidgetText>,

    sense: Sense,
}

impl SelectModalItem {
    pub fn new(title: impl Into<WidgetText>, description: Option<impl Into<WidgetText>>) -> Self {
        Self {
            selected: false,
            title: title.into(),
            description: description.map(|d| d.into()),
            sense: Sense::click(),
        }
    }

    pub fn selected(mut self, selected: bool) -> Self {
        self.selected = selected;
        self
    }

    pub fn sense(mut self, sense: Sense) -> Self {
        self.sense = sense;
        self
    }
}

impl Widget for SelectModalItem {
    fn ui(self, ui: &mut Ui) -> Response {
        let response = ui
            .vertical(|ui| {
                Label::new(self.title.heading()).selectable(false).ui(ui);
                if let Some(description) = self.description {
                    Label::new(description.weak()).selectable(false).ui(ui);
                }
            })
            .response
            .on_hover_cursor(egui::CursorIcon::PointingHand);

        if response.hovered() {
            ui.painter().rect_filled(
                response.rect,
                0.0,
                ui.style().visuals.widgets.active.bg_fill,
            );
        }

        response
    }
}

Screenshots:

I'd love for the rect to actually fill the entire available width, but also using ui.available_width(); is an issue, as it gets the amount it can draw, instead of what I want, which is the current size of the modal, as I'd like for it to extend as far as the modal currently does. As well as having some padding around the text. What would be the appropriate way of going about this?

[YgorSouza]

I think what you are looking for is a Frame.

[j-junckes]

Thank you! That did indeed solve my problem, thanks a lot!