bug: Multiple visual inconsistencies and UI issues compared to Open Web UI

[JKGeovision]

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

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

[owui-terminator]

🔍 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 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 bug: Multiple visual inconsistencies and UI issues compared to Open Web UI #231 (backgrounds, hover/focus states, dropdown sizing, typography, and diff alignment). It is the broadest overlap with the new report.
   by JKGeovision

2. 🟣 #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 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 bug: Multiple visual inconsistencies and UI issues compared to Open Web UI #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.