diff --git a/CHANGELOG.md b/CHANGELOG.md
index e9a25189..1fa2b1fc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -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.
diff --git a/app/globals.css b/app/globals.css
index 08b88e51..c335a003 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -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);
@@ -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);
diff --git a/components/ModelsConfig.tsx b/components/ModelsConfig.tsx
index 19ddce96..25fecd5f 100644
--- a/components/ModelsConfig.tsx
+++ b/components/ModelsConfig.tsx
@@ -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>
@@ -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>.
@@ -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)}
@@ -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>