Refactor metadata display in GlobalSessionItem and SessionItem for improved clarity and styling consistency; adjust CSS for layout enhancements

Author: lemurra_microsoft

webviews/dashboardView/components/GlobalSessionItem.tsx

@@ -71,7 +71,7 @@ export const GlobalSessionItem: React.FC<GlobalSessionItemProps> = ({
 					</div>
 				)}
 				{(session.isTemporary || !session.isLocal) && (
-					<div className="metadata-item">
+					<div className="metadata-item status-and-date">
 						{session.isTemporary ? (
 							<span className="status-badge status-creating">
 								<span className="codicon codicon-loading codicon-modifier-spin"></span>
@@ -88,11 +88,14 @@ export const GlobalSessionItem: React.FC<GlobalSessionItemProps> = ({
 								{formatStatus(session.status, index)}
 							</span>
 						)}
+						<span className="session-date" title={formatFullDateTime(session.dateCreated)}>{formatDate(session.dateCreated)}</span>
+					</div>
+				)}
+				{session.isLocal && (
+					<div className="metadata-item">
+						<span title={formatFullDateTime(session.dateCreated)}>{formatDate(session.dateCreated)}</span>
 					</div>
 				)}
-				<div className="metadata-item">
-					<span title={formatFullDateTime(session.dateCreated)}>{formatDate(session.dateCreated)}</span>
-				</div>
 				{session.isLocal && session.branchName && (
 					<div className="metadata-item">
 						<span className="codicon codicon-git-branch"></span>

webviews/dashboardView/components/SessionItem.tsx

@@ -65,7 +65,7 @@ export const SessionItem: React.FC<SessionItemProps> = ({
 			</div>
 			<div className="item-metadata">
 				{(session.isTemporary || !session.isLocal) && (
-					<div className="metadata-item">
+					<div className="metadata-item status-and-date">
 						{session.isTemporary ? (
 							<span className="status-badge status-creating">
 								<span className="codicon codicon-loading codicon-modifier-spin"></span>
@@ -82,11 +82,14 @@ export const SessionItem: React.FC<SessionItemProps> = ({
 								{formatStatus(session.status, index)}
 							</span>
 						)}
+						<span className="session-date" title={formatFullDateTime(session.dateCreated)}>{formatDate(session.dateCreated)}</span>
+					</div>
+				)}
+				{session.isLocal && (
+					<div className="metadata-item">
+						<span title={formatFullDateTime(session.dateCreated)}>{formatDate(session.dateCreated)}</span>
 					</div>
 				)}
-				<div className="metadata-item">
-					<span title={formatFullDateTime(session.dateCreated)}>{formatDate(session.dateCreated)}</span>
-				</div>
 				{session.isLocal && session.branchName && (
 					<div className="metadata-item">
 						<span className="codicon codicon-git-branch"></span>

webviews/dashboardView/index.css

@@ -268,7 +268,7 @@ body {
 	overflow-y: auto;
 	border: 1px solid var(--vscode-panel-border);
 	border-radius: 4px;
-	margin-top: 4px;
+	margin-top: 8px;
 	padding: 0;
 }
 
@@ -401,7 +401,7 @@ body {
 	justify-content: space-between;
 	flex-wrap: wrap;
 	gap: 8px;
-	font-size: 12px;
+	font-size: 11px;
 	color: var(--vscode-descriptionForeground);
 }
 
@@ -415,6 +415,15 @@ body {
 	margin-right: 2px;
 }
 
+.metadata-item.status-and-date {
+	gap: 8px;
+}
+
+.metadata-item.status-and-date .session-date {
+	font-size: 11px;
+	color: var(--vscode-descriptionForeground);
+}
+
 .status-badge {
 	padding: 2px 6px;
 	border-radius: 3px;
@@ -739,10 +748,6 @@ body {
 	font-style: italic;
 }
 
-.quick-actions {
-	margin-top: 8px;
-}
-
 .quick-action-button {
 	display: flex;
 	align-items: center;