From 2499ea086d5f976a6c66685c1f25b32f2949445d Mon Sep 17 00:00:00 2001
From: kaipher7 <kai.hahnhansen@student.nmt.edu>
Date: Wed, 22 Apr 2026 00:43:24 -0600
Subject: [PATCH] public profile display

---
 .../resources/static/css/create-recipe.css    |  2 +-
 src/main/resources/static/css/explore.css     |  4 +-
 src/main/resources/static/css/home.css        |  2 +-
 src/main/resources/static/css/my-profile.css  |  2 +-
 .../resources/static/css/public-profile.css   | 95 ++++++-------------
 .../resources/templates/public-profile.html   |  4 +-
 6 files changed, 36 insertions(+), 73 deletions(-)

diff --git a/src/main/resources/static/css/create-recipe.css b/src/main/resources/static/css/create-recipe.css
index f7eeac8..583fc34 100644
--- a/src/main/resources/static/css/create-recipe.css
+++ b/src/main/resources/static/css/create-recipe.css
@@ -307,7 +307,7 @@ textarea {
 }
 
 .dollar:hover {
-  color: var(--dusty-red-hover);
+  color: var(--dark);
 }
 
 /* Tags */
diff --git a/src/main/resources/static/css/explore.css b/src/main/resources/static/css/explore.css
index cddae2b..74b51d5 100644
--- a/src/main/resources/static/css/explore.css
+++ b/src/main/resources/static/css/explore.css
@@ -205,7 +205,7 @@ body, html {
 
 #filter-form h3 {
   color: var(--dark);
-  font-size: 0.9em;
+  font-size: 1em;
   margin: 8px 0 10px;
   
 }
@@ -261,7 +261,7 @@ body, html {
   justify-content: flex-start;
   align-items: flex-start;
 /*   overflow: auto; */
-  scrollbar-color: var(--dusty-red) var(--pale-yellow);
+  scrollbar-color: var(--dusty-red) transparent;
 /*   height: auto; */
   height: calc(100vh - 40px); /* subtract header height */
   overflow-y: auto;
diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css
index 2b47191..12bfea7 100644
--- a/src/main/resources/static/css/home.css
+++ b/src/main/resources/static/css/home.css
@@ -250,7 +250,7 @@ body, html {
   justify-content: center;
   align-items: flex-start;
   overflow: scroll;
- scrollbar-color: var(--dusty-red) var(--pale-yellow);
+ scrollbar-color: var(--dusty-red) transparent;
   height: 100%;
 }
 
diff --git a/src/main/resources/static/css/my-profile.css b/src/main/resources/static/css/my-profile.css
index 6737bb3..829d7e4 100644
--- a/src/main/resources/static/css/my-profile.css
+++ b/src/main/resources/static/css/my-profile.css
@@ -292,7 +292,7 @@ body, html {
   justify-content: flex-start;
   align-items: flex-start;
   overflow: auto;
-  scrollbar-color: var(--dusty-red) var(--pale-yellow);
+  scrollbar-color: var(--dusty-red) transparent;
   height: auto;
   color: var(--dusty-red);
 }
diff --git a/src/main/resources/static/css/public-profile.css b/src/main/resources/static/css/public-profile.css
index 6737bb3..82bcfee 100644
--- a/src/main/resources/static/css/public-profile.css
+++ b/src/main/resources/static/css/public-profile.css
@@ -183,7 +183,8 @@ body, html {
 .sidebar-right {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: flex-start;
+  gap: 16px;
   align-items: center;
   margin: 25px;
   padding: 10px;
@@ -194,9 +195,6 @@ body, html {
   color: var(--dusty-red);
   font-size: 1.4em;
   font-weight: 900;
-  overflow: auto;
-  scrollbar-color: var(--dusty-red) transparent;
-  scrollbar-width: none; /* hid the scroll bar but you can scroll */
 }
 
 .sidebar-right p {
@@ -205,81 +203,44 @@ body, html {
 }
 
 .sidebar-right strong {
-  font-size: 1.2em;
+  font-size: 1.5em;
   color: var(--dark);
   letter-spacing: 1px;
+  margin-top: 20px;
 }
 
-.profile-form {
-  width: 100%;
+.bio-wrap {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  padding: 12px;
-  box-sizing: border-box;
-  color: var(--dusty-red);
-}
-
-.profile-form label {
-  font-size: 0.85em;
-  color: var(--dark);
-  font-weight: 700;
-  margin-bottom: 4px;
-  display: block;
-}
-
-.profile-form input[type="text"],
-.profile-form textarea {
-  width: 100%;
-  box-sizing: border-box;
+  align-items: center;
+  gap: 6px;
   background: var(--pale-yellow);
-  border: none;
-  border-radius: 8px;
-  padding: 6px 10px;
-  font-family: 'Mali', cursive;
-  font-size: 0.75em;
-  font-weight: 500;
   color: var(--dusty-red);
-  resize: vertical;
+  border-radius: 10px;
+  padding: 6px;
+  box-sizing: border-box;
+  margin: 15px;
+  overflow-wrap: break-word;
+  min-width: 0;
+  flex-shrink: 1;
+  width: calc(100% - 30px);
+  max-width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-color: var(--dusty-red) transparent;
 }
 
-.profile-form input[type="text"]:focus,
-.profile-form textarea:focus {
-  outline: 2px solid var(--dusty-red);
-}
-
-.profile-form button[type="submit"] {
-  background: var(--dusty-red);
-  color: var(--dark-yellow);
-  border: none;
-  border-radius: 8px;
-  padding: 8px 16px;
-  font-family: 'Mali', cursive;
-  font-size: 0.75em;
-  font-weight: 700;
-  cursor: pointer;
-  align-self: center;
-}
-
-.view-profile-btn {
-  background: var(--dusty-red);
-  color: var(--dark-yellow) !important;
-  border-radius: 8px;
-  padding: 6px 14px;
-  font-weight: 700;
+.bio-wrap p {
+  width: 100%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
   font-size: 0.7em;
-  text-decoration: none !important;
-  display: inline-block;
-  margin-bottom: 16px;
+  font-weight: 500;
+  text-align: left;
+  margin: 0 6px;
 }
 
-.view-profile-btn:hover {
-  background: var(--dusty-red-hover);
-}
-
-.profile-form button[type="submit"]:hover {
-  background: var(--dusty-red-hover);
-}
 
 /* =========================
    Main Content Area
@@ -292,7 +253,7 @@ body, html {
   justify-content: flex-start;
   align-items: flex-start;
   overflow: auto;
-  scrollbar-color: var(--dusty-red) var(--pale-yellow);
+  scrollbar-color: var(--dusty-red) transparent;
   height: auto;
   color: var(--dusty-red);
 }
diff --git a/src/main/resources/templates/public-profile.html b/src/main/resources/templates/public-profile.html
index de66bef..30bf0e1 100644
--- a/src/main/resources/templates/public-profile.html
+++ b/src/main/resources/templates/public-profile.html
@@ -70,7 +70,9 @@
         <div class="sidebar-right">
             <p><strong th:text="${profile.effectiveDisplayName}">Display Name</strong></p>
             <p th:text="'@' + ${profile.username}">@username</p>
-            <p th:if="${profile.bio != null and !#strings.isEmpty(profile.bio)}" th:text="${profile.bio}">Bio goes here.</p>
+            <div class="bio-wrap">
+            	<p th:if="${profile.bio != null and !#strings.isEmpty(profile.bio)}" th:text="${profile.bio}">Bio goes here.</p>
+            </div>
         </div>
     </div>