From 1721bb8f98ce8580fd188cd4c947e69641971ad5 Mon Sep 17 00:00:00 2001
From: Syndamia <kamen.d.mladenov@protonmail.com>
Date: Fri, 19 Mar 2021 19:44:03 +0200
Subject: Fixed spacing around user secondary info

---
 src/app/components/profile/profile.component.css  |  5 +++++
 src/app/components/profile/profile.component.html | 22 +++++++++++-----------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/app/components/profile/profile.component.css b/src/app/components/profile/profile.component.css
index c14fd00..22ad320 100644
--- a/src/app/components/profile/profile.component.css
+++ b/src/app/components/profile/profile.component.css
@@ -7,12 +7,17 @@
   width: 5rem;
 }
 
+.sec-info-card {
+  padding-bottom: calc(var(--card-padding) - 0.3em);
+}
+
 .sec-info-title {
   padding-bottom: 0.2em;
   margin-bottom: 0.3em;
 }
 
 .sec-info {
+  width: fit-content;
   background-color: #424242;
   margin: 0 0.3em 0.3em 0;
 }
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 4bb6752..2a8786d 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -21,30 +21,30 @@
 			</form>
 		</div>
 	</section>
-	<section class="card flex-col full-width">
+	<section class="card sec-info-card flex-col full-width">
 		<div class="sec-info-title faded-slim-border border-bottom-only">
 			Languages
 		</div>
-		<span *ngIf="user.languages.length === 0">
+		<div *ngIf="user.languages.length === 0">
 			None
-		</span>
+		</div>
 		<div class="flex-row" *ngFor="let lang of user.languages">
-			<span class="sec-info border-radius-normal padding-small">
+			<div class="sec-info border-radius-normal padding-small">
 				{{ lang.name }}
-			</span>
+			</div>
 		</div>
 	</section>
-	<section class="card flex-col full-width">
+	<section class="card sec-info-card flex-col full-width">
 		<div class="sec-info-title faded-slim-border border-bottom-only">
 			Technologies
 		</div>
-		<span *ngIf="user.technologies.length === 0">
+		<div *ngIf="user.technologies.length === 0">
 			None
-		</span>
-		<div *ngFor="let tech of user.technologies">
-			<span class="sec-info border-radius-normal padding-small">
+		</div>
+		<div  class="flex-row" *ngFor="let tech of user.technologies">
+			<div class="sec-info border-radius-normal padding-small">
 				{{ tech.name }}
-			</span>
+			</div>
 		</div>
 	</section>
 	<hr class="card-hr">
-- 
cgit v1.2.3