continue: work on match table

src/app/styles/pages-styles.scss

@@ -4718,14 +4718,14 @@
 			border-bottom: 1px solid rgb(226, 232, 240);
 		}
 
-		&-case-grid {
+		/* 		&-case-grid {
 			display: grid;
 			grid-template-rows: 1fr 1fr;
 			gap: 5px;
 			flex: 1;
 			min-height: 0;
 			overflow: auto;
-		}
+		} */
 
 		&-case {
 			padding: 10px;
@@ -4736,6 +4736,59 @@
 				padding-bottom: 10px;
 			}
 		}
+
+		&-choice {
+			height: 100%;
+			display: flex;
+			justify-content: center;
+			flex-direction: column;
+
+			h4 {
+				text-align: center;
+			}
+
+			.violation-info-choice-buttons {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+			}
+		}
+
+		&-tabs-wrapper {
+			position: relative;
+
+			.violation-info-choice {
+				padding: 20px;
+				text-align: center;
+			}
+
+			.violation-info-choice-buttons {
+				display: flex;
+				gap: 16px;
+				justify-content: center;
+				margin-top: 16px;
+			}
+
+			.violation-info-choice-btn {
+				padding: 12px 24px;
+				border: 1px solid #ccc;
+				border-radius: 6px;
+				background: white;
+				cursor: pointer;
+			}
+
+			.violation-info-tab {
+				padding: 8px 16px;
+				border: none;
+				background: transparent;
+				cursor: pointer;
+			}
+
+			.violation-info-tab--active {
+				border-bottom: 2px solid blue;
+				color: blue;
+			}
+		}
 	}
 
 	.violation-page-note {
@@ -5238,7 +5291,7 @@
 			padding: 20px;
 
 			&:first-child {
-/* 				width: 60px;
+				/* 				width: 60px;
 				min-width: 60px;
 				max-width: 60px; */
 				display: flex;