[Feature] Semantic DOM

[mk-pmb]

Feature description

All HTML elements that have an actual purpose, i.e. are not just helpers for technical requirements, should have class names that describe what their purpose is. Examples:

• .h-full.w-full.justify-between → .conversation
• .h-full.w-full.justify-between .h-fit.items-center → .buttonbar
• .h-full.w-full.justify-between .h-fit.items-center.border-t → .buttonbar.buttonbar-below-chatlog

Use case or problem

I'm trying to write custom CSS that uses more screen space for the chatlog.
Currently, I can only address very few elements by purpose (e.g. .model-selector). For all others, I have to rely on accidential features that are brittle and non-descriptive.

Additional context

No response

Confirmation

• I have searched existing issues for this feature
• I have described why this feature would be helpful
• I am willing to help implement this feature (optional)