[PR #2055] [CLOSED] fix: admin dashboard styles refactor #36507

New Issue

GiteaMirror · 2026-04-25T10:20:56-05:00

GiteaMirror commented

2026-04-25 10:20:56 -05:00

📋 Pull Request Information

Original PR: https://github.com/open-webui/open-webui/pull/2055
Author: @albertso
Created: 5/7/2024
Status: ❌ Closed

Base: main ← Head: feat-dashboard-fixes

📝 Commits (2)

01b1a8b Fixed styling issues and refactor
341609f Correct tab spacing

📊 Changes

1 file changed (+191 additions, -315 deletions)

View changed files

📝 src/routes/(app)/admin/+page.svelte (+191 -315)

📄 Description

Pull Request Checklist

Description: Briefly describe the changes in this pull request.
Changelog: Ensure a changelog entry following the format of Keep a Changelog is added at the bottom of the PR description.
Documentation: Have you updated relevant documentation Open WebUI Docs, or other documentation sources?
Dependencies: Are there any new dependencies? Have you updated the dependency versions in the documentation?
Testing: Have you written and run sufficient tests for the changes?
Code Review: Have you self-reviewed your code and addressed any coding standard issues?

Description

I have rewritten the Admin page to improve code readability and mantainability, and to facilitate inclusion of more tabs in the future. Visually and functionally the page remains the same, except for some style fixes. In the video I demonstrate how the row action buttons are now visible where they weren't, and also how the ui responds the same as before, even when the markup has changed.

Changelog Entry

Fixed

Fixed scrollbar not showing and not being able to select actions at the end of the row.
Fixed user actions hidden from admin, previously line 270 {#if user.role !== 'admin'} is reversed.
Fixed the way how some tailwind classes were being applied.

Changed

Readability improved, line count reduced
Prepared markup to accept for more tabs.
Localized all strings
Moved all styles to the style tag at the bottom of the file

Additional Information

The main improvement here relies on the use of tailwind's @apply directive, which allows to apply tailwind styles in css:

section { @apply flex flex-col }

There are also improvements in how some conditional stylings were being applied, where instead of swapping a bunch of tailwind classes in code, now the code just changes a single class that controls the styles, which are separated from the markup.

<button
  class="flex items-center gap-2 text-xs px-3 py-0.5 rounded-lg {user.role ===
    'admin' &&
    'text-sky-600 dark:text-sky-200 bg-sky-200/30'} {user.role ===
    'user' && // ...">

One way to do it, seems would be this:

<button class="is-{user.role}" />
<style> button:global(.is-pending){ @apply /* ... */ } </style>

But this doesn't work entirely, because doing it this way the classes are not known to the svelte compiler. We can use the :global() directive, but the tailwind processor cannot create the dark: classes for the dark theme. The only way this seems to work is to inform svelte of all the classes, like this:

<button
  class:is-user={user.role=='user'}
  class:is-admin={user.role=='admin'}
  class:is-pending={user.role=='pending'} />
<style> button.is-pending{ @apply text-gray-600 dark:text-gray200 } </style>

I modified this file because I'm attempting to implement some kind of plugins/extensions functionality to open-webui, even if it's only to see how far can I get. I was creating a page of its own in the /plugins route, but then realized this should be part of the admin page.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/open-webui/open-webui/pull/2055 **Author:** [@albertso](https://github.com/albertso) **Created:** 5/7/2024 **Status:** ❌ Closed **Base:** `main` ← **Head:** `feat-dashboard-fixes` --- ### 📝 Commits (2) - [`01b1a8b`](https://github.com/open-webui/open-webui/commit/01b1a8bdb76147d2567262b663002f6bb5819a8a) Fixed styling issues and refactor - [`341609f`](https://github.com/open-webui/open-webui/commit/341609f6eb57dd1f8ea06b251afad6f2866f9d92) Correct tab spacing ### 📊 Changes **1 file changed** (+191 additions, -315 deletions) <details> <summary>View changed files</summary> 📝 `src/routes/(app)/admin/+page.svelte` (+191 -315) </details> ### 📄 Description ## Pull Request Checklist - [x] **Description:** Briefly describe the changes in this pull request. - [x] **Changelog:** Ensure a changelog entry following the format of [Keep a Changelog](https://keepachangelog.com/) is added at the bottom of the PR description. - [ ] **Documentation:** Have you updated relevant documentation [Open WebUI Docs](https://github.com/open-webui/docs), or other documentation sources? - [ ] **Dependencies:** Are there any new dependencies? Have you updated the dependency versions in the documentation? - [ ] **Testing:** Have you written and run sufficient tests for the changes? - [ ] **Code Review:** Have you self-reviewed your code and addressed any coding standard issues? --- ## Description ![open-webui--refactor-admin-styles01a](https://github.com/open-webui/open-webui/assets/1270475/ddf29376-d21c-4dd1-9010-35a4cb861382) I have rewritten the Admin page to improve code readability and mantainability, and to facilitate inclusion of more tabs in the future. Visually and functionally the page remains the same, except for some style fixes. In the video I demonstrate how the row action buttons are now visible where they weren't, and also how the ui responds the same as before, even when the markup has changed. --- ### Changelog Entry ### Fixed - Fixed scrollbar not showing and not being able to select actions at the end of the row. - Fixed user actions hidden from admin, previously line 270 `{#if user.role !== 'admin'}` is reversed. - Fixed the way how some tailwind classes were being applied. ### Changed - Readability improved, line count reduced - Prepared markup to accept for more tabs. - Localized all strings - Moved all styles to the style tag at the bottom of the file --- ### Additional Information The main improvement here relies on the use of tailwind's `@apply` directive, which allows to apply tailwind styles in css: ```css section { @apply flex flex-col } ``` There are also improvements in how some conditional stylings were being applied, where instead of swapping a bunch of tailwind classes in code, now the code just changes a single class that controls the styles, which are separated from the markup. ```html <button class="flex items-center gap-2 text-xs px-3 py-0.5 rounded-lg {user.role === 'admin' && 'text-sky-600 dark:text-sky-200 bg-sky-200/30'} {user.role === 'user' && // ..."> ``` One way to do it, seems would be this: ```html <button class="is-{user.role}" /> <style> button:global(.is-pending){ @apply /* ... */ } </style> ``` But this doesn't work entirely, because doing it this way the classes are not known to the svelte compiler. We can use the `:global()` directive, but the tailwind processor cannot create the `dark:` classes for the dark theme. The only way this seems to work is to inform svelte of all the classes, like this: ```html <button class:is-user={user.role=='user'} class:is-admin={user.role=='admin'} class:is-pending={user.role=='pending'} /> <style> button.is-pending{ @apply text-gray-600 dark:text-gray200 } </style> ``` --- I modified this file because I'm attempting to implement some kind of plugins/extensions functionality to open-webui, even if it's only to see how far can I get. I was creating a page of its own in the `/plugins` route, but then realized this should be part of the admin page. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-04-25 10:20:56 -05:00

GiteaMirror closed this issue

2026-04-25 10:20:57 -05:00

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#36507