fix violation table styles

src/app/styles/violation-details.scss

@@ -1,12 +1,18 @@
 @use './variable.scss' as v;
 
 :root {
-	--violation-info-indents: 32px;
+	--violation-info-indents: 30px;
+}
+
+@media (max-width: 1480px) {
+	:root {
+		--violation-info-indents: 20px;
+	}
 }
 
 @media (max-width: 1240px) {
 	:root {
-		--violation-info-indents: 16px;
+		--violation-info-indents: 15px;
 	}
 }
 
@@ -408,7 +414,7 @@
 			flex: 1;
 			min-height: 0;
 			height: 100%;
-			overflow: hidden;
+			overflow: auto;
 		}
 
 		&-grid {
@@ -441,8 +447,8 @@
 		}
 
 		&-image {
-			width: 300px;
+			width: 285px;
-			height: 200px;
+			height: 190px;
 			position: relative;
 			background: #f5f5f5;
 			border-radius: 8px;
@@ -467,6 +473,8 @@
 			justify-content: center;
 			position: absolute;
 			bottom: 5px;
+			left: 50%;
+			transform: translateX(-50%);
 
 			.image-btn {
 				width: 36px;
@@ -917,14 +925,17 @@
 		}
 	}
 
+	.note-form-section {
+		overflow: hidden;
+		margin-bottom: var(--violation-info-indents);
+		width: 100%;
+	}
+
 	.note-form-group {
 		border: 1px solid #e9ecef;
 		box-sizing: border-box;
 		padding: 0px;
 		border-radius: 8px;
-		margin-bottom: var(--violation-info-indents);
-		overflow: hidden;
-		width: 100%;
 
 		input {
 			display: block;

src/app/ui/file-page/violation-table/case-complaint.tsx

@@ -87,6 +87,9 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
 					<form action={formAction}>
 						<input type="hidden" name="violationId" value={localViolation.id} />
 						<section
+							className="note-form-section"
+						>
+							<div
 								className="note-form-group"
 							>
 								<label
@@ -104,6 +107,25 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
 									onChange={(e) => setNoteText(e.target.value)}
 								>
 								</textarea>
+							</div>
+
+							{state?.errorMessage?.textArea && (
+								<p
+									className="text-sm text-red-500"
+								>
+
+									{
+										state?.errorMessage?.textArea.split('&').map((e, index) => {
+											return (
+												<span key={index}>
+													{t(e)}
+													<br />
+												</span>
+											)
+										})
+									}
+								</p>
+							)}
 						</section>
 
 						<div
@@ -127,24 +149,6 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
 							>
 								{t('submit-violation')}
 							</button>
-
-							{state?.errorMessage?.textArea && (
-								<p
-									className="text-sm text-red-500"
-								>
-
-									{
-										state?.errorMessage?.textArea.split('&').map((e, index) => {
-											return (
-												<span key={index}>
-													{t(e)}
-													<br />
-												</span>
-											)
-										})
-									}
-								</p>
-							)}
 						</div>
 					</form>
 

src/app/ui/file-page/violation-table/case-legal.tsx

@@ -80,6 +80,9 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 							className="note-form-flex"
 						>
 							<section
+								className="note-form-section"
+							>
+								<div
 									className="note-form-group"
 								>
 									<label
@@ -94,6 +97,8 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 										className="note-case-input"
 										placeholder={t('fill-title-of-the-case') + '...'}
 									/>
+								</div>
+
 								{state?.errorMessage?.caseTitle && (
 									<p
 										className="text-sm text-red-500"
@@ -112,6 +117,9 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 								)}
 							</section>
 							<section
+								className="note-form-section"
+							>
+								<div
 									className="note-form-group"
 								>
 									<label
@@ -126,6 +134,8 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 										className="note-case-input"
 										placeholder={t('enter-the-amount-of-damage') + '...'}
 									/>
+								</div>
+
 								{state?.errorMessage?.amount && (
 									<p
 										className="text-sm text-red-500"
@@ -146,6 +156,9 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 						</div>
 
 						<section
+							className="note-form-section"
+						>
+							<div
 								className="note-form-group"
 							>
 								<label
@@ -161,6 +174,7 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 									placeholder={t('fill-text-of-the-case') + '...'}
 								>
 								</textarea>
+							</div>
 
 							{state?.errorMessage?.textArea && (
 								<p

src/app/ui/file-page/violation-table/file-page-violation-info.tsx

@@ -187,7 +187,7 @@ export default function FilePageViolationInfo({ selectedViolation, caseType }: {
 										target.src = '/images/no-image.png';
 									}}
 								/>
-							</div>
+
 								<div className="violation-info-image-buttons">
 									<button
 										className="image-btn image-btn-view"
@@ -205,7 +205,7 @@ export default function FilePageViolationInfo({ selectedViolation, caseType }: {
 									</button>
 								</div>
 							</div>
-
+						</div>
 						<div
 							className="violation-info-right-side"
 						>