Skip to content

fix: contain long custom provider URLs #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
andrebrait wants to merge 3 commits into
base: main
Choose a base branch
from
Open

fix: contain long custom provider URLs #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b6b0a44
fix: contain long custom provider URLs
andrebrait Sep 11, 2026
c4f504b
fix: wrap provider tabs and save controls on mobile
andrebrait Sep 11, 2026
26cf4b1
fix: remove row-blind provider tab dividers
andrebrait Sep 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,15 @@ All notable changes to **omp-web** (`@kahme247/ompweb`) are documented in this f

---

## Unreleased

### Fixes & Improvements

- Keep long custom-provider URLs and hostnames inside their cards, with provider actions wrapping on narrow screens.
- Keep provider navigation labels fully visible and wrap the Add Provider and Save controls inside narrow settings panels.

---

## [v0.3.6] - 2026-08-28

This release adds workspace renaming and reordering, improved context compaction views, prompt queue expansion, and clear network startup banners.
Expand Down
9 changes: 4 additions & 5 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2338,6 +2338,8 @@ html.dark .dropdown-surface :is(select, option) {
/* Provider Sub-navigation & Cards */
.providers-segmented {
display: inline-flex;
flex-wrap: wrap;
max-width: 100%;
align-items: stretch;
border: 1px solid var(--border);
border-radius: var(--radius-control);
Expand All @@ -2358,14 +2360,11 @@ html.dark .dropdown-surface :is(select, option) {
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
white-space: normal;
overflow-wrap: anywhere;
transition: background var(--dur-fast) var(--ease-out-warm), color var(--dur-fast) var(--ease-out-warm);
}

.providers-segmented-btn + .providers-segmented-btn {
border-left: 1px solid var(--border);
}

.providers-segmented-btn:hover {
background: var(--bg-hover);
color: var(--text);
Expand Down
24 changes: 12 additions & 12 deletions components/ModelsConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,12 +130,12 @@ function ProviderDetail({ name, provider, onChange, onRename, onDelete }: {
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
{/* Hero Provider Header Card */}
<div style={{ padding: "14px 16px", border: "1px solid var(--border)", borderRadius: "var(--radius-card)", background: "var(--bg-panel)", display: "flex", flexDirection: "column", gap: 10, boxShadow: "var(--shadow-card)" }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
<div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
<div style={{ display: "flex", alignItems: "center", gap: 10, flex: "1 1 220px", minWidth: 0 }}>
<div style={{ width: 36, height: 36, borderRadius: "var(--radius-control)", background: "var(--bg-subtle)", border: "1px solid var(--border)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
<ProviderIcon id={name} size={20} />
</div>
<div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
<div style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0, overflowWrap: "anywhere" }}>
<div style={{ fontSize: 15, fontWeight: 700, fontFamily: "var(--font-mono)", color: "var(--text)" }}>{name}</div>
<div style={{ fontSize: 11, color: "var(--text-muted)", fontFamily: "var(--font-mono)" }}>{hostName}</div>
</div>
Expand Down Expand Up @@ -1805,8 +1805,8 @@ export function ModelsConfig({ onClose, onSelectTab, onSaved, embedded = false }
</div>
) : (
<div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
<div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16 }}>
<div>
<div style={{ display: "flex", flexWrap: "wrap", alignItems: "flex-start", justifyContent: "space-between", gap: 16 }}>
<div style={{ flex: "1 1 220px", minWidth: 0, overflowWrap: "anywhere" }}>
<div style={{ fontSize: 14, fontWeight: 600, color: "var(--text)" }}>{t("modelsConfig.customProviders")}</div>
<div style={{ fontSize: 12.5, color: "var(--text-muted)", marginTop: 3 }}>
Custom endpoints, local Ollama / vLLM models, or reverse proxies defined in <code style={{ fontFamily: "var(--font-mono)", fontSize: 11 }}>~/.omp/agent/models.yml</code>.
Expand Down Expand Up @@ -1860,15 +1860,15 @@ export function ModelsConfig({ onClose, onSelectTab, onSaved, embedded = false }
const models = pData.models ?? [];
return (
<div key={pName} className="settings-card" style={{ flexDirection: "column", alignItems: "stretch", gap: 12 }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
<div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
<div style={{ display: "flex", alignItems: "center", gap: 10, flex: "1 1 220px", minWidth: 0 }}>
<ProviderIcon id={pName} size={22} />
<div>
<div style={{ minWidth: 0, overflowWrap: "anywhere" }}>
<div style={{ fontSize: 13.5, fontWeight: 700, fontFamily: "var(--font-mono)", color: "var(--text)" }}>{pName}</div>
<div style={{ fontSize: 11.5, color: "var(--text-muted)", fontFamily: "var(--font-mono)" }}>{pData.baseUrl || t("modelsConfig.defaultEndpoint")}</div>
</div>
</div>
<div style={{ display: "flex", alignItems: "center", gap: 6 }}>
<div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 6 }}>
<button
type="button"
onClick={() => addModel(pName)}
Expand Down Expand Up @@ -1985,11 +1985,11 @@ export function ModelsConfig({ onClose, onSelectTab, onSaved, embedded = false }

{/* Footer for saving models.yml */}
{(subTab === "custom" || !embedded) && (
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, padding: "12px 18px", borderTop: "1px solid var(--border)", background: "var(--bg-panel)", borderRadius: "0 0 var(--radius-card) var(--radius-card)", flexShrink: 0, marginTop: 16 }}>
<div style={{ fontSize: 12, color: saveError ? "var(--status-error)" : "var(--text-muted)" }}>
<div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 10, padding: "12px 18px", borderTop: "1px solid var(--border)", background: "var(--bg-panel)", borderRadius: "0 0 var(--radius-card) var(--radius-card)", flexShrink: 0, marginTop: 16 }}>
<div style={{ flex: "1 1 220px", minWidth: 0, overflowWrap: "anywhere", fontSize: 12, color: saveError ? "var(--status-error)" : "var(--text-muted)" }}>
{saveError ? saveError : <code>~/.omp/agent/models.yml</code>}
</div>
<div style={{ display: "flex", alignItems: "center", gap: 10 }}>
<div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 10, marginLeft: "auto" }}>
<button onClick={() => loadConfig()} disabled={loading} style={{ padding: "6px 14px", background: "none", border: "1px solid var(--border)", borderRadius: 6, color: "var(--text-muted)", cursor: "pointer", fontSize: 12.5 }}>
{t("modelsConfig.cancel")}
</button>
Expand Down
Loading