From fc9dc836e76559e8e8deb403444c899e61eeda15 Mon Sep 17 00:00:00 2001
From: smanylov <bio29s@mail.ru>
Date: Thu, 23 Apr 2026 11:42:54 +0700
Subject: [PATCH] fix violation table styles

---
 src/app/styles/violation-details.scss         | 27 ++++--
 .../violation-table/case-complaint.tsx        | 68 ++++++++-------
 .../file-page/violation-table/case-legal.tsx  | 86 +++++++++++--------
 .../file-page-violation-info.tsx              | 34 ++++----
 4 files changed, 122 insertions(+), 93 deletions(-)

diff --git a/src/app/styles/violation-details.scss b/src/app/styles/violation-details.scss
index aac4854..cfaf70a 100644
--- a/src/app/styles/violation-details.scss
+++ b/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;
-			height: 200px;
+			width: 285px;
+			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;
diff --git a/src/app/ui/file-page/violation-table/case-complaint.tsx b/src/app/ui/file-page/violation-table/case-complaint.tsx
index 3717681..b74b07c 100644
--- a/src/app/ui/file-page/violation-table/case-complaint.tsx
+++ b/src/app/ui/file-page/violation-table/case-complaint.tsx
@@ -87,23 +87,45 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
 					<form action={formAction}>
 						<input type="hidden" name="violationId" value={localViolation.id} />
 						<section
-							className="note-form-group"
+							className="note-form-section"
 						>
-							<label
-								className="note-case-label"
-								htmlFor="note"
+							<div
+								className="note-form-group"
 							>
-								{t('text-of-the-complaint')}
-							</label>
+								<label
+									className="note-case-label"
+									htmlFor="note"
+								>
+									{t('text-of-the-complaint')}
+								</label>
 
-							<textarea
-								name="note"
-								className="note-textarea"
-								placeholder={`${t('text-area-error-fill-complaint-text')}...`}
-								value={noteText}
-								onChange={(e) => setNoteText(e.target.value)}
-							>
-							</textarea>
+								<textarea
+									name="note"
+									className="note-textarea"
+									placeholder={`${t('text-area-error-fill-complaint-text')}...`}
+									value={noteText}
+									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>
 
diff --git a/src/app/ui/file-page/violation-table/case-legal.tsx b/src/app/ui/file-page/violation-table/case-legal.tsx
index cc3890c..fb437d3 100644
--- a/src/app/ui/file-page/violation-table/case-legal.tsx
+++ b/src/app/ui/file-page/violation-table/case-legal.tsx
@@ -80,20 +80,25 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 							className="note-form-flex"
 						>
 							<section
-								className="note-form-group"
+								className="note-form-section"
 							>
-								<label
-									className="note-case-label"
-									htmlFor="caseTitle"
+								<div
+									className="note-form-group"
 								>
-									{t('case-name')}
-								</label>
-								<input
-									type="text"
-									name="caseTitle"
-									className="note-case-input"
-									placeholder={t('fill-title-of-the-case') + '...'}
-								/>
+									<label
+										className="note-case-label"
+										htmlFor="caseTitle"
+									>
+										{t('case-name')}
+									</label>
+									<input
+										type="text"
+										name="caseTitle"
+										className="note-case-input"
+										placeholder={t('fill-title-of-the-case') + '...'}
+									/>
+								</div>
+
 								{state?.errorMessage?.caseTitle && (
 									<p
 										className="text-sm text-red-500"
@@ -112,20 +117,25 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 								)}
 							</section>
 							<section
-								className="note-form-group"
+								className="note-form-section"
 							>
-								<label
-									className="note-case-label"
-									htmlFor="amount"
+								<div
+									className="note-form-group"
 								>
-									{t('amount-of-damage')}
-								</label>
-								<input
-									type="number"
-									name="amount"
-									className="note-case-input"
-									placeholder={t('enter-the-amount-of-damage') + '...'}
-								/>
+									<label
+										className="note-case-label"
+										htmlFor="amount"
+									>
+										{t('amount-of-damage')}
+									</label>
+									<input
+										type="number"
+										name="amount"
+										className="note-case-input"
+										placeholder={t('enter-the-amount-of-damage') + '...'}
+									/>
+								</div>
+
 								{state?.errorMessage?.amount && (
 									<p
 										className="text-sm text-red-500"
@@ -146,21 +156,25 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 						</div>
 
 						<section
-							className="note-form-group"
+							className="note-form-section"
 						>
-							<label
-								className="note-case-label"
-								htmlFor="note"
+							<div
+								className="note-form-group"
 							>
-								{t('text-of-the-case')}
-							</label>
+								<label
+									className="note-case-label"
+									htmlFor="note"
+								>
+									{t('text-of-the-case')}
+								</label>
 
-							<textarea
-								name="note"
-								className="note-textarea"
-								placeholder={t('fill-text-of-the-case') + '...'}
-							>
-							</textarea>
+								<textarea
+									name="note"
+									className="note-textarea"
+									placeholder={t('fill-text-of-the-case') + '...'}
+								>
+								</textarea>
+							</div>
 
 							{state?.errorMessage?.textArea && (
 								<p
diff --git a/src/app/ui/file-page/violation-table/file-page-violation-info.tsx b/src/app/ui/file-page/violation-table/file-page-violation-info.tsx
index 3b608ac..8bff9ca 100644
--- a/src/app/ui/file-page/violation-table/file-page-violation-info.tsx
+++ b/src/app/ui/file-page/violation-table/file-page-violation-info.tsx
@@ -187,25 +187,25 @@ 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"
-									onClick={() => setIsModalOpen(true)}
-									title="Увеличить"
-								>
-									<IconFullScreen />
-								</button>
-								<button
-									className="image-btn image-btn-open"
-									onClick={openInNewTab}
-									title="Открыть в новой вкладке"
-								>
-									<IconFollowToLink />
-								</button>
+
+								<div className="violation-info-image-buttons">
+									<button
+										className="image-btn image-btn-view"
+										onClick={() => setIsModalOpen(true)}
+										title="Увеличить"
+									>
+										<IconFullScreen />
+									</button>
+									<button
+										className="image-btn image-btn-open"
+										onClick={openInNewTab}
+										title="Открыть в новой вкладке"
+									>
+										<IconFollowToLink />
+									</button>
+								</div>
 							</div>
 						</div>
-
 						<div
 							className="violation-info-right-side"
 						>