fix: update css styles

frontend/src/components/WarningPopover/WarningPopover.styles.scss

@@ -1,6 +1,7 @@
 .warning-content {
 	display: flex;
 	flex-direction: column;
+	background-color: var(--l2-background);
 
 	// === SECTION: Summary (Top)
 	&__summary-section {
@@ -11,12 +12,13 @@
 	&__summary {
 		display: flex;
 		justify-content: space-between;
+		gap: var(--spacing-8);
 		padding: 16px;
 	}
 
 	&__summary-left {
 		display: flex;
-		align-items: baseline;
+		align-items: center;
 		gap: 8px;
 	}
 
@@ -24,6 +26,7 @@
 		display: flex;
 		flex-direction: column;
 		gap: 6px;
+		min-width: 0;
 	}
 
 	&__warning-code {
@@ -124,35 +127,35 @@
 	}
 
 	&__message-list {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-2);
 		margin: 0;
-		padding: 0;
+		padding: 0 var(--spacing-8) var(--spacing-8);
 		list-style: none;
 		max-height: 275px;
 	}
 
 	&__message-item {
 		position: relative;
-		margin-bottom: 4px;
 		color: var(--l2-foreground);
 		font-family: Geist Mono;
 		font-size: 12px;
 		font-weight: 400;
 		line-height: 18px;
-		padding: 3px 12px;
-		padding-left: 26px;
+		padding-left: var(--spacing-6);
 	}
 
 	&__message-item::before {
 		font-family: unset;
 		content: '';
 		position: absolute;
-		left: 12px;
-		top: 50%;
-		transform: translateY(-50%);
-		width: 2px;
-		height: 4px;
-		border-radius: 50px;
-		background: var(--l1-border);
+		left: 0;
+		top: 7px;
+		width: var(--spacing-2);
+		height: var(--spacing-2);
+		border-radius: 50%;
+		background: var(--l3-foreground);
 	}
 
 	&__scroll-hint {

frontend/src/components/WarningPopover/WarningPopover.tsx

@@ -36,8 +36,12 @@ export function WarningContent({ warning }: WarningContentProps): JSX.Element {
 						</div>
 
 						<div className="warning-content__summary-text">
-							<h2 className="warning-content__warning-code">{warningCode}</h2>
-							<p className="warning-content__warning-message">{warningMessage}</p>
+							{warningCode && (
+								<h2 className="warning-content__warning-code">{warningCode}</h2>
+							)}
+							{warningMessage && (
+								<p className="warning-content__warning-message">{warningMessage}</p>
+							)}
 						</div>
 					</div>