open-webui/computer

Fork 0

mirror of https://github.com/open-webui/computer.git synced 2026-11-05 01:17:24 +00:00

[GH-ISSUE #231] bug: Multiple visual inconsistencies and UI issues compared to Open Web UI #143

New issue

Open

opened 2026-10-18 14:03:20 +00:00 by bsakaguchi · 1 comment

bsakaguchi commented

2026-10-18 14:03:20 +00:00

Owner

Originally created by @JKGeovision on GitHub (Aug 19, 2026).
Original GitHub issue: https://github.com/open-webui/computer/issues/231

Hello,

While using Open Computer, I discovered multiple visual and UI inconsistencies that deviate from the design language of Open Web UI, affecting readability and overall user experience.

Steps to reproduce

Launch Open Computer in a browser (e.g. Firefox).
Open a workspace with an active chat session.
Observe the following issues:
- The alignment of the icon and title in the sidebar header differs from Open Web UI.
- The entire application uses a single background color, making it difficult to visually differentiate between UI regions (sidebar, main panel, chat input, etc.).
- The chat input box lacks a visible :focus-within / :hover state, providing no visual feedback when interacting with it.
- The resize handle for the split view displays a marker/indicator that is not present in Open Web UI.
- The chat window with the full width setting enabled is too large (100 % width), leaving no comfortable margins.
- The font size in the chat window is noticeably larger than in Open Web UI.
- Code blocks have a background color that is too light, making them difficult to distinguish from regular text.
- The branch dropdown button truncates long branch names.
- The model dropdown button truncates long model names.
- Dropdown menu content does not use the available space (the menu is rendered at a fixed, narrow width).
- The chat name font is too large, inconsistent with Open Web UI, and truncates important information earlier.
- In the diff view, changed lines have a + or - prefix that pushes the text to the right, so added/removed lines do not align vertically with unchanged lines.

Screenshots

Before

After

Workaround

As a temporary workaround, the following CSS can be applied via a browser extension (e.g. Stylus for Firefox):

/* Theme */
html {
    color-scheme: dark !important;
    --app-bg: #0f0f0f !important;
    --app-fg: #f1f1f1 !important;
    --app-border: color-mix(in oklab, var(--app-fg) 1.5%, transparent) !important;
    --app-divider: color-mix(in oklab, var(--app-fg) 0.875%, transparent) !important;
}
/* Alignment icon and title */
aside > :nth-child(2) {
    & > a {
        margin: 1px 0px 0px 1px;
        gap: 0.75rem !important;
        font-weight: normal !important;
    }
    & > a > img {
        width: 20px;
        height: 20px;
        margin-left: -6px;
    }
}
/* Background of app */
main {
    --app-bg: #161616;
    --app-border: color-mix(in oklab, var(--app-fg) 5%, transparent);
    background-color: var(--app-bg);
}
#main-col > div {
    --app-bg: #161616;
    --app-border: color-mix(in oklab, var(--app-fg) 7.5%, transparent);
    background-color: var(--app-bg);
}
/* Background and border of chat input */
.app-surface:has(.chat-editor-mount) {
    --app-bg: #1c1c1c;
    --app-border: transparent;
    position: relative;
    background-color: var(--app-bg);

    & span.truncate {
        max-width: none !important;
    }
    &:focus-within, &:hover {
        --app-border: color-mix(in oklab, var(--app-fg) 7.5%, transparent);
    }
}
/* Split View resize handle marker */
.resize-handle, .git-resize-handle {
    background: none !important;
}
/* Chat window full width container */
div.pane-content > div > div > div > .max-w-full {
    width: 80% !important;

    &.flex-col {
        zoom: 0.95;
    }
    /* Codeblocks */
    & .not-prose:not(.group\/table) {
        background-color: black !important;
    }
    /* List fix */
    & .chat-editor-mount {
        & ol {
            list-style: decimal;
        }
        & ul {
            list-style: disc;
        }
    }
}
/* Branch drop down button */
button.max-w-32, span.max-w-32 {
    max-width: none !important;
}
/* Dropdown */
div.svelte-1fbx6nu {
    min-width: fit-content !important;

    & .overflow-y-auto {
        scrollbar-gutter: stable !important;
    }
}
/* Chatname */
div.svelte-1ieqiib .text-left {
    font-weight: normal !important;
}
div.svelte-1ieqiib .text-xs {
    font-size: 13px !important;
}
/* diff +/- offset */
div.svelte-1onbaf .select-none.text-gray-400 {
    width: 29px;
}

Thank you for your time and for the great work on Open Computer!

Best regards,
Joshua Krinner

Originally created by @JKGeovision on GitHub (Aug 19, 2026). Original GitHub issue: https://github.com/open-webui/computer/issues/231 Hello, While using Open Computer, I discovered multiple visual and UI inconsistencies that deviate from the design language of Open Web UI, affecting readability and overall user experience. ## Steps to reproduce 1. Launch Open Computer in a browser (e.g. Firefox). 2. Open a workspace with an active chat session. 3. Observe the following issues: - The alignment of the icon and title in the sidebar header differs from Open Web UI. - The entire application uses a single background color, making it difficult to visually differentiate between UI regions (sidebar, main panel, chat input, etc.). - The chat input box lacks a visible `:focus-within` / `:hover` state, providing no visual feedback when interacting with it. - The resize handle for the split view displays a marker/indicator that is not present in Open Web UI. - The chat window with the *full width* setting enabled is too large (100 % width), leaving no comfortable margins. - The font size in the chat window is noticeably larger than in Open Web UI. - Code blocks have a background color that is too light, making them difficult to distinguish from regular text. - The branch dropdown button truncates long branch names. - The model dropdown button truncates long model names. - Dropdown menu content does not use the available space (the menu is rendered at a fixed, narrow width). - The chat name font is too large, inconsistent with Open Web UI, and truncates important information earlier. - In the diff view, changed lines have a `+` or `-` prefix that pushes the text to the right, so added/removed lines do not align vertically with unchanged lines. ## Screenshots <img width="2000" alt="Image" src="https://github.com/user-attachments/assets/98a0c6ce-7daf-4b1c-ac3e-d8db4faaf829" /> <img height="200" alt="Image" src="https://github.com/user-attachments/assets/18e110e6-694c-4b10-8d64-009b247fcd87" /> <img height="200" alt="Image" src="https://github.com/user-attachments/assets/3491ea42-d651-4181-87d9-eba314968f29" /> <img height="200" alt="Image" src="https://github.com/user-attachments/assets/0a090fc6-ec2c-4a3c-82df-2e7bf25134eb" /> <img width="2000" alt="Image" src="https://github.com/user-attachments/assets/ae16183a-6f3f-46a4-921b-4c7cb94a2a28" /> ## Before <img width="2000" alt="Image" src="https://github.com/user-attachments/assets/72d355d7-1293-4be7-a5b5-d72716e5e6fb" /> ## After <img width="2000" alt="Image" src="https://github.com/user-attachments/assets/a205f759-6e05-43ab-9b28-569bfd4e3e87" /> ## Workaround As a temporary workaround, the following CSS can be applied via a browser extension (e.g. [Stylus](https://github.com/openstyles/stylus) for Firefox): ```css /* Theme */ html { color-scheme: dark !important; --app-bg: #0f0f0f !important; --app-fg: #f1f1f1 !important; --app-border: color-mix(in oklab, var(--app-fg) 1.5%, transparent) !important; --app-divider: color-mix(in oklab, var(--app-fg) 0.875%, transparent) !important; } /* Alignment icon and title */ aside > :nth-child(2) { & > a { margin: 1px 0px 0px 1px; gap: 0.75rem !important; font-weight: normal !important; } & > a > img { width: 20px; height: 20px; margin-left: -6px; } } /* Background of app */ main { --app-bg: #161616; --app-border: color-mix(in oklab, var(--app-fg) 5%, transparent); background-color: var(--app-bg); } #main-col > div { --app-bg: #161616; --app-border: color-mix(in oklab, var(--app-fg) 7.5%, transparent); background-color: var(--app-bg); } /* Background and border of chat input */ .app-surface:has(.chat-editor-mount) { --app-bg: #1c1c1c; --app-border: transparent; position: relative; background-color: var(--app-bg); & span.truncate { max-width: none !important; } &:focus-within, &:hover { --app-border: color-mix(in oklab, var(--app-fg) 7.5%, transparent); } } /* Split View resize handle marker */ .resize-handle, .git-resize-handle { background: none !important; } /* Chat window full width container */ div.pane-content > div > div > div > .max-w-full { width: 80% !important; &.flex-col { zoom: 0.95; } /* Codeblocks */ & .not-prose:not(.group\/table) { background-color: black !important; } /* List fix */ & .chat-editor-mount { & ol { list-style: decimal; } & ul { list-style: disc; } } } /* Branch drop down button */ button.max-w-32, span.max-w-32 { max-width: none !important; } /* Dropdown */ div.svelte-1fbx6nu { min-width: fit-content !important; & .overflow-y-auto { scrollbar-gutter: stable !important; } } /* Chatname */ div.svelte-1ieqiib .text-left { font-weight: normal !important; } div.svelte-1ieqiib .text-xs { font-size: 13px !important; } /* diff +/- offset */ div.svelte-1onbaf .select-none.text-gray-400 { width: 29px; } ``` Thank you for your time and for the great work on Open Computer! Best regards, Joshua Krinner

bsakaguchi commented

2026-10-18 14:03:21 +00:00

Author

Owner

@owui-terminator[bot] commented on GitHub (Aug 19, 2026):

🔍 Related Issues Found

I found some existing issues that might be related. Please check if any of these are duplicates or contain helpful solutions:

🟢 #172 feat: Add built-in theme customization
This issue directly requests built-in theme/customization support and includes the same CSS workarounds for many of the visual inconsistencies described in #231 (backgrounds, hover/focus states, dropdown sizing, typography, and diff alignment). It is the broadest overlap with the new report.
by JKGeovision
🟣 #91 Desktop UX: contrast, scaling, and git worktree discovery
This issue mentions the same general UX problem space: contrast, scaling, and sizing being off compared to the desired Open WebUI-like appearance. It overlaps with the new report’s complaints about too-dark/low-contrast surfaces and text/padding being too small or large.
by JKGeovision
🟣 #124 feat: Expand chat response width for wide monitors
This issue specifically reports the chat response area being too narrow on wide monitors, which is closely related to #231’s full-width chat layout and excessive width/margins complaint.
by JKGeovision

💡 If your issue is a duplicate, please close it and add any additional details to the existing issue instead.

This comment was generated automatically. React with 👍 if helpful, 👎 if not.

@owui-terminator[bot] commented on GitHub (Aug 19, 2026):  🔍 **Related Issues Found** I found some existing issues that might be related. Please check if any of these are duplicates or contain helpful solutions: 1. 🟢 [#172](https://github.com/open-webui/computer/issues/172) **feat: Add built-in theme customization** *This issue directly requests built-in theme/customization support and includes the same CSS workarounds for many of the visual inconsistencies described in #231 (backgrounds, hover/focus states, dropdown sizing, typography, and diff alignment). It is the broadest overlap with the new report.* *by JKGeovision* 2. 🟣 [#91](https://github.com/open-webui/computer/issues/91) **Desktop UX: contrast, scaling, and git worktree discovery** *This issue mentions the same general UX problem space: contrast, scaling, and sizing being off compared to the desired Open WebUI-like appearance. It overlaps with the new report’s complaints about too-dark/low-contrast surfaces and text/padding being too small or large.* *by JKGeovision* 3. 🟣 [#124](https://github.com/open-webui/computer/issues/124) **feat: Expand chat response width for wide monitors** *This issue specifically reports the chat response area being too narrow on wide monitors, which is closely related to #231’s full-width chat layout and excessive width/margins complaint.* *by JKGeovision* --- 💡 If your issue is a duplicate, please close it and add any additional details to the existing issue instead. *This comment was generated automatically.* React with 👍 if helpful, 👎 if not.

No labels

enhancement

pull-request

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

open-webui/computer#143

No description provided.

Rows
Columns