From 31bca044eae556dbac46a7070cfeed3faeb82185 Mon Sep 17 00:00:00 2001
From: sxpphickat <sphhhsh@gmail.com>
Date: Thu, 7 Dec 2023 18:33:04 -0300
Subject: [PATCH] =?UTF-8?q?fix(front):=20=F0=9F=90=9B=20wrapping=20repo=20?=
 =?UTF-8?q?infos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html        | 34 ++++++++++++++++++----------------
 src/css/style.css | 31 +++++++++++++++++--------------
 2 files changed, 35 insertions(+), 30 deletions(-)

diff --git a/index.html b/index.html
index e6acabf..c12a7c4 100644
--- a/index.html
+++ b/index.html
@@ -40,22 +40,25 @@
 						<input type="color" id="bg-color" name="bg-color">
 					</div>
 			
-					<input class="txt-input span-all" type="url" name="repo-url" id="repo-url" placeholder="Repository url">
-					<div class="list-of-items">
-						<label for="show-info">Show info:</label>
-						<div class="center-txt-vertically">
-							<input type="checkbox" id="issues" value="issues" name="show-info">
-							<label for="issues">Issues</label><br>
+					<div class="repo-wrapper">
+						<label for="repo-url">Repo-Info</label>
+						<input class="txt-input span-all" type="url" name="repo-url" id="repo-url" placeholder="Repository url">
+						<div class="list-of-items">
+							<label for="show-info">Show info:</label>
+							<div class="center-txt-vertically">
+								<input type="checkbox" id="issues" value="issues" name="show-info">
+								<label for="issues">Issues</label><br>
+							</div>
+							<div class="center-txt-vertically">
+								<input type="checkbox" id="prs" value="prs" name="show-info">
+								<label for="prs">Pull requests</label><br>
+							</div>
+							<div class="center-txt-vertically">
+								<input type="checkbox" id="contributors" value="contributors" name="show-info">
+								<label for="contributors">Contributors</label><br>
+							</div>
+							<br>
 						</div>
-						<div class="center-txt-vertically">
-							<input type="checkbox" id="prs" value="prs" name="show-info">
-							<label for="prs">Pull requests</label><br>
-						</div>
-						<div class="center-txt-vertically">
-							<input type="checkbox" id="contributors" value="contributors" name="show-info">
-							<label for="contributors">Contributors</label><br>
-						</div>
-						<br>
 					</div>
 					<div class="list-of-items">
 						<label for="deco">Event decoration:</label>
@@ -75,7 +78,6 @@
 							<input type="radio" id="pride" value="pride" name="deco">
 							<label for="pride">Pride month</label><br>
 						</div>
-			
 					</div>
 				</form>
 			</div>
diff --git a/src/css/style.css b/src/css/style.css
index 601bcd7..b7102e6 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -44,8 +44,9 @@ body {
 	/* background-color: var(--options-bgc); */
 	color: white;
 	padding: 70px;
-/* 	overflow: auto;
- */}
+	overflow: auto;
+	overflow-x: hidden;
+}
 
 input::placeholder {
 	color: var(--dark-txt-color);
@@ -55,6 +56,7 @@ input::placeholder {
 label {
 	color: var(--dark-txt-color);
 	font-size: 1.5rem;
+	align-self: center;
 }
 
 h1 {
@@ -98,11 +100,6 @@ input:focus, select:focus, .style-layout > input[type="color"]:focus {
 	color: var(--dark-txt-color);
 }
 
-
-option {
-	border-radius: 10px;
-}
-
 input[type="radio"], input[type="checkbox"] {
 	-webkit-appearance: none;
 	appearance: none;
@@ -116,8 +113,6 @@ input[type="radio"], input[type="checkbox"] {
 
 }
 
-/*checkbox*/
-
 input[type="radio"]:focus, input[type="checkbox"]:focus {
 	border-style: none;
 	box-shadow: none;
@@ -134,10 +129,6 @@ input[type="radio"]:not(:checked), input[type="checkbox"]:not(:checked) {
 	box-shadow: none;
 }
 
-label {
-	align-self: center;
-}
-
 .center-txt-vertically {
 	display: flex;
 	align-items: center;
@@ -159,7 +150,7 @@ label {
 	align-self: center;
 }
 
-.style-layout {
+.style-layout, .repo-wrapper {
 	display: grid;
 	gap: 15px;
 }
@@ -188,4 +179,16 @@ label {
 	background-color: var(--options-bgc);
 	overflow: auto;
 	overflow-x: hidden;
+}
+
+.repo-wrapper {
+	border: solid 1px var(--dark-txt-color);
+	border-radius: 6px;
+	padding: 1rem;
+	width: 20rem;
+	box-sizing: border-box;
+}
+
+.repo-wrapper > input {
+	width: 100%;
 }
\ No newline at end of file