merge: fix/ui-padding-issues

This commit is contained in:
Developer
2026-06-16 21:55:07 +00:00
10 changed files with 70 additions and 73 deletions
+1 -1
View File
@@ -14,7 +14,7 @@ interface ErrorStateProps {
}
export const ErrorState = ({ message = "Failed to load", onRetry }: ErrorStateProps) => (
<div className="card stack">
<div className="card card-md stack">
<p>{message}</p>
{onRetry && (
<button className="secondary-button" onClick={onRetry} type="button">
@@ -86,7 +86,7 @@ export const ConfigProfileEditorPanel = ({
const hasSelection = isCreating || selectedProfile;
return (
<div className="flex-1 overflow-auto p-5 min-w-0">
<div className="flex-1 overflow-auto p-5 pb-20 min-w-0">
{!hasSelection ? (
<div className="empty-state">
<div className="empty-state-icon">
@@ -24,8 +24,10 @@ export const ProjectDialog = ({
return (
<div className="dialog-overlay" role="dialog" aria-modal="true">
<div className="dialog">
<h2>{mode === "create" ? "Create Project" : "Edit Project"}</h2>
<form onSubmit={onSubmit} className="stack">
<div className="dialog-header">
<h2>{mode === "create" ? "Create Project" : "Edit Project"}</h2>
</div>
<form onSubmit={onSubmit} className="dialog-body stack">
<label className="form-field">
Name
<input
@@ -227,12 +227,14 @@ export const RepositoryCreateDialog = ({
return (
<div className="dialog-overlay" role="dialog" aria-modal="true">
<div className="dialog">
<h3>{title}</h3>
<p className="muted">
Clone an existing repository from git.commumedia.org, or create a
blank bare repo here.
</p>
<form onSubmit={handleSubmit} className="stack">
<div className="dialog-header">
<h3>{title}</h3>
</div>
<form onSubmit={handleSubmit} className="dialog-body stack">
<p className="muted m-0">
Clone an existing repository from git.commumedia.org, or create a
blank bare repo here.
</p>
<div className="form-field repo-mode-radios">
<label className="repo-mode-label">
<input
@@ -53,7 +53,7 @@ export const ToolTypeEditorPanel = ({
const hasSelection = isCreating || selectedToolType;
return (
<div className="flex-1 overflow-auto p-5 min-w-0">
<div className="flex-1 overflow-auto p-5 pb-20 min-w-0">
{!hasSelection ? (
<div className="empty-state">
<div className="empty-state-icon">
+21 -17
View File
@@ -155,27 +155,31 @@ export const SessionsPage = () => {
{/* Dirty Delete Confirmation Modal */}
{dirtyDeleteSession && (
<div className="modal-overlay" onClick={clearDirtyDelete}>
<div className="dialog-overlay" onClick={clearDirtyDelete}>
<div
className="modal-content"
className="dialog"
onClick={(e) => e.stopPropagation()}
>
<h3>Uncommitted Changes</h3>
<p>
The repository{" "}
<strong>{dirtyDeleteSession.repository_name}</strong> has
uncommitted changes. Deleting this session will permanently
lose these changes.
</p>
<div className="changed-files-list">
<h4>Changed files:</h4>
<ul>
{dirtyDeleteFiles.map((file, idx) => (
<li key={idx}>{file}</li>
))}
</ul>
<div className="dialog-header">
<h3>Uncommitted Changes</h3>
</div>
<div className="modal-actions">
<div className="dialog-body stack">
<p>
The repository{" "}
<strong>{dirtyDeleteSession.repository_name}</strong> has
uncommitted changes. Deleting this session will permanently
lose these changes.
</p>
<div className="changed-files-list">
<h4>Changed files:</h4>
<ul>
{dirtyDeleteFiles.map((file, idx) => (
<li key={idx}>{file}</li>
))}
</ul>
</div>
</div>
<div className="dialog-actions">
<button
className="secondary-button"
onClick={clearDirtyDelete}
+26 -18
View File
@@ -124,15 +124,19 @@ export function WorkspacesPage() {
onClick={() => setStartWorkspace(null)}
>
<div className="dialog" onClick={(e) => e.stopPropagation()}>
<h3>Start Tool</h3>
<ToolStarter
workspace={startWorkspace}
onStarted={() => {
setStartWorkspace(null);
void refresh();
}}
onCancel={() => setStartWorkspace(null)}
/>
<div className="dialog-header">
<h3>Start Tool</h3>
</div>
<div className="dialog-body">
<ToolStarter
workspace={startWorkspace}
onStarted={() => {
setStartWorkspace(null);
void refresh();
}}
onCancel={() => setStartWorkspace(null)}
/>
</div>
</div>
</div>
)}
@@ -204,15 +208,19 @@ export function WorkspacesPage() {
{startWorkspace && (
<div className="dialog-overlay" onClick={() => setStartWorkspace(null)}>
<div className="dialog" onClick={(e) => e.stopPropagation()}>
<h3>Start Tool</h3>
<ToolStarter
workspace={startWorkspace}
onStarted={() => {
setStartWorkspace(null);
void refresh();
}}
onCancel={() => setStartWorkspace(null)}
/>
<div className="dialog-header">
<h3>Start Tool</h3>
</div>
<div className="dialog-body">
<ToolStarter
workspace={startWorkspace}
onStarted={() => {
setStartWorkspace(null);
void refresh();
}}
onCancel={() => setStartWorkspace(null)}
/>
</div>
</div>
</div>
)}
+1 -6
View File
@@ -381,6 +381,7 @@
flex-direction: column;
align-items: stretch;
gap: 0;
padding: var(--space-4);
}
.project-info h3 {
@@ -677,12 +678,6 @@
line-height: var(--line-height-normal);
}
.dialog-actions {
display: flex;
justify-content: flex-end;
gap: 0.6rem;
}
.keys-list {
display: flex;
flex-direction: column;
+2 -2
View File
@@ -115,14 +115,14 @@
align-items: center;
gap: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
border-top: 1px solid var(--border);
}
.session-card-actions.mobile {
display: flex;
gap: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
border-top: 1px solid var(--border);
}
.session-card-actions.mobile .mobile-primary {
+5 -19
View File
@@ -434,17 +434,6 @@ button,
min-width: var(--touch-target);
}
/* Dialog Responsive */
.dialog {
width: min(560px, 100vw - 2rem);
max-height: min(800px, 100vh - 2rem);
overflow-y: auto;
}
.dialog-lg {
width: min(800px, 100vw - 2rem);
}
/* Table Responsive */
.table-responsive {
overflow-x: auto;
@@ -621,11 +610,6 @@ a.nav-item,
width: 100%;
}
/* Dialog content spacing */
.dialog-body {
padding: var(--space-4) 0;
}
/* Prevent text overflow in cards */
.card h3,
.card p {
@@ -636,9 +620,11 @@ a.nav-item,
/* Session Navigation */
.session-item {
display: flex;
align-items: center;
align-items: flex-start;
gap: var(--space-2);
padding-left: var(--space-2);
padding: var(--space-2) var(--space-3);
text-align: left;
width: 100%;
}
.session-icon-wrap {
@@ -649,7 +635,7 @@ a.nav-item,
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
align-self: flex-start;
margin-top: 2px;
}
.session-icon-wrap .icon {