adaptive styles for file uploads

src/app/components/UploadSectionFile.tsx

@@ -456,23 +456,24 @@ export default function UploadSectionFile({
 				{
 					selectedFiles.length > 0 && (
 						<div className="mt-6" >
-							<div className="flex justify-between items-center mb-4" >
+							<div className="selected-file-action-panel" >
 								<div>
-									<p className="text-gray-700 font-medium" >
+									<p className="selected-file-action-info" >
-										{t('total-files')}: {selectedFiles.length} |
+										<span>{t('total-files')}: {selectedFiles.length}</span>
-										{t('uploading')}: {uploadingCount} |
+										<span>{t('uploading')}: {uploadingCount}</span>
-										{t('completed')}: {completedCount}
+										<span>{t('completed')}: {completedCount}</span>
 									</p>
-									< div className="w-full bg-gray-200 rounded-full h-2.5 mt-2" >
+									<div className="w-full bg-gray-200 rounded-full h-2.5 mt-2">
 										<div
 											className="bg-blue-600 h-2.5 rounded-full transition-all duration-300"
 											style={{ width: `${getTotalProgress}%` }
 											}
-										> </div>
+										>
+										</div>
 									</div>
 								</div>
 
-								< div className="flex gap-2" >
+								<div className="flex gap-2">
 									<button
 										className={`btn btn-primary`}
 										onClick={handleStartAllUploads}
@@ -491,14 +492,14 @@ export default function UploadSectionFile({
 								</div>
 							</div>
 
-							< div className="space-y-4 max-h-96 overflow-y-auto" >
+							<div className="selected-file-wrapper">
 								{
 									selectedFiles.map((file, index) => (
 										<div
 											key={`${file.name}-${index}`}
 											className={`selected-file ${file.status === 'completed' ? 'done' : ''} ${file.status === 'error' ? 'error' : ''}`}
 										>
-											<div className="selected-file-file-info" >
+											<div className="selected-file-file-info">
 												<div>
 													<p className="text-gray-700" >
 														<span className="font-medium" > {t('file')}: </span> {file.name}
@@ -527,9 +528,9 @@ export default function UploadSectionFile({
 														)
 													}
 												</div>
-												< div className="flex items-center" >
+												<div className="selected-file-right-block">
 													<span className={
-														`font-medium text-lg mr-4 ${file.status === 'completed' ? 'text-green-600' :
+														`upload-progress ${file.status === 'completed' ? 'text-green-600' :
 															file.status === 'uploading' ? 'text-blue-600' :
 																'text-gray-600'
 														}`
@@ -537,7 +538,7 @@ export default function UploadSectionFile({
 														{file.progress} %
 													</span>
 													< button
-														className="btn btn-cancel text-sm py-1 px-3"
+														className="btn btn-cancel"
 														onClick={() => handleClearFile(file.uploadId || file.name)}
 														type="button"
 													>
@@ -559,9 +560,9 @@ export default function UploadSectionFile({
 
 											{
 												file.status === 'pending' && (
-													<div className="mt-3 text-center" >
+													<div className="mt-2 text-center" >
 														<button
-															className="btn btn-confirm text-sm py-1 px-4"
+															className="btn btn-confirm"
 															onClick={() => uploadSingleFile(file)
 															}
 															type="button"

src/app/styles/pages-styles.scss

@@ -395,6 +395,11 @@
 			text-align: left;
 			display: flex;
 			justify-content: space-between;
+
+			@media (max-width: 500px) {
+				flex-direction: column;
+				gap: 10px;
+			}
 		}
 
 		.uploaded-image {
@@ -439,6 +444,10 @@
 			font-size: 16px;
 			transition: 0.3s;
 			min-width: 120px;
+
+			@media (max-width: 500px) {
+				max-height: 34px;
+			}
 		}
 
 		.btn:hover {
@@ -446,6 +455,50 @@
 			box-shadow: 0 8px 25px v.$shadow-1;
 		}
 	}
+
+	.selected-file-action-panel {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-bottom: 16px;
+
+		@media (max-width: 900px) {
+			flex-direction: column;
+		}
+	}
+
+	.selected-file-right-block {
+		display: flex;
+		align-items: center;
+
+		@media (max-width: 500px) {
+			flex-direction: column-reverse;
+			gap: 8px;
+		}
+
+		.upload-progress {
+			font-weight: 500;
+			font-size: 18px;
+			margin-right: 16px;
+
+			@media (max-width: 500px) {
+				margin-right: 0px;
+			}
+		}
+	}
+
+	.selected-file-action-info {
+		color: #374151;
+		font-weight: 500;
+		display: flex;
+		gap: 10px;
+	}
+
+	.selected-file-wrapper {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
 }
 
 .page-row {

src/i18n/messages/en.json

@@ -214,13 +214,13 @@
 		"error-user-not-have-tokens-for-protect": "User not have tokens for protect",
 		"registration-date": "Registration date",
 		"copied": "Copied",
-		"uploading": "uploading",
+		"uploading": "Uploading",
-		"clear-all": "clear-all",
+		"clear-all": "Clear all",
-		"upload-all": "upload-all",
+		"upload-all": "Upload all",
-		"remove": "remove",
+		"remove": "Remove",
 		"start-upload": "Start upload",
-		"completed": "completed",
+		"completed": "Completed",
-		"pending": "pending"
+		"pending": "Pending"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -214,13 +214,13 @@
 		"error-user-not-have-tokens-for-protect": "У пользователя нет токенов для защиты.",
 		"registration-date": "Дата регистрации",
 		"copied": "Скопировано",
-		"uploading": "загрузка",
+		"uploading": "Загрузка",
-		"clear-all": "очистить всё",
+		"clear-all": "Очистить всё",
-		"upload-all": "загрузить всё",
+		"upload-all": "Загрузить всё",
-		"remove": "удалить",
+		"remove": "Удалить",
 		"start-upload": "Начать загрузку",
-		"completed": "завершено",
+		"completed": "Завершено",
-		"pending": "в ожидании"
+		"pending": "В ожидании"
 	},
 	"Login-register-form": {
 		"and": "и",