Selector .px-3 matches unintended section

[aemogie]

Is there an existing issue outlining your problem?

• I have searched the existing issues and they do not solve my problem.

What userstyles are you seeing the problem on?

lbl:chatgpt

Describe your problem.

The selector .px-3 matches unintended (i think) sections as well, specifically the bar at the bottom. (Check first image)

userstyles/styles/chatgpt/catppuccin.user.css

Lines 224 to 226 in 79cea90

	.px-3 {
	background: @mantle !important;
	}

It's :hover also matches unintended sections which aren't clickable. (Check second image)

userstyles/styles/chatgpt/catppuccin.user.css

Lines 228 to 230 in 79cea90

	.px-3:hover {
	background: @base !important;
	}

I messed around a bit and fixed it on my end using

    .px-3.py-3,
    .pt-3 {
      background: @mantle !important;
    }

    .px-3.py-3:hover {
      background: @base !important;
    }

Don't know if this code is good or should be changed, never dont userstyles before. .px-3.py-3 only matched the conversations, while .pt-3 only matched the date seperators.

Attach screenshots.

Image 1: All elements matching .px-3 includes the bottom bar.

Image 2: :hover matching date seperators which aren't clickable.

What browser(s) are you seeing the problem on?

Firefox v116.0b8

Any additional comments?

No response