From 371b091c1056525ed72a3fbbd050a20631020595 Mon Sep 17 00:00:00 2001
From: Masahiko AMANO <hiko-19@ya.ru>
Date: Fri, 3 Feb 2023 20:26:44 +0300
Subject: [PATCH] perf(web): improve text input positioning in file menu

---
 web/public/css/tfm.css    | 15 +++++++++++++++
 web/public/tfm/files.html | 12 ++++++------
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/web/public/css/tfm.css b/web/public/css/tfm.css
index 207bcc9..c3788f2 100644
--- a/web/public/css/tfm.css
+++ b/web/public/css/tfm.css
@@ -103,6 +103,21 @@ form {
 	min-height: 0;
 }
 
+.form-group.row {
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.col-form-label {
+	flex: 0 0 auto;
+	margin-right: 10px;
+}
+
+.col-form-input {
+	flex: 1 1 auto;
+	min-width: 200px;
+}
+
 .list {
 	flex: 1 1 auto;
 	display: flex;
diff --git a/web/public/tfm/files.html b/web/public/tfm/files.html
index b5805b6..8a87e87 100644
--- a/web/public/tfm/files.html
+++ b/web/public/tfm/files.html
@@ -45,14 +45,14 @@
 		</div>
 		<form>
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label" for="name">File name</label>
-				<div class="col-sm-10">
+				<label class="col-form-label" for="name">File name</label>
+				<div class="col-form-input">
 					<input type="text" name="name" class="form-control" id="name">
 				</div>
 			</div>
 			<div class="form-group row">
-				<label class="col-sm-3 col-form-label" for="text-filter">Tag filter</label>
-				<div class="col-sm-9">
+				<label class="col-form-label" for="text-filter">Tag filter</label>
+				<div class="col-form-input">
 					<input type="text" name="text-filter" class="form-control" id="text-filter">
 				</div>
 			</div>
@@ -72,8 +72,8 @@
 		<h2>Add new file</h2>
 		<form>
 			<div class="form-group row">
-				<label class="col-sm-2 col-form-label" for="new-name">File name</label>
-				<div class="col-sm-10">
+				<label class="col-form-label" for="new-name">File name</label>
+				<div class="col-form-input">
 					<input type="text" name="new-name" class="form-control" id="new-name">
 				</div>
 			</div>