merge: fix/ui-padding-issues
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user