public profile display

src/main/resources/static/css/create-recipe.css

@@ -307,7 +307,7 @@ textarea {
 }
 
 .dollar:hover {
-  color: var(--dusty-red-hover);
+  color: var(--dark);
 }
 
 /* Tags */

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;

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%;
 }
 

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);
 }

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 {
+.bio-wrap {
-  width: 100%;
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  align-items: center;
-  padding: 12px;
+  gap: 6px;
-  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;
   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,
+.bio-wrap p {
-.profile-form textarea:focus {
+  width: 100%;
-  outline: 2px solid var(--dusty-red);
+  word-wrap: break-word;
-}
+  overflow-wrap: break-word;
-
+  white-space: normal;
-.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;
   font-size: 0.7em;
-  text-decoration: none !important;
+  font-weight: 500;
-  display: inline-block;
+  text-align: left;
-  margin-bottom: 16px;
+  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);
 }

src/main/resources/templates/public-profile.html

@@ -70,9 +70,11 @@
         <div class="sidebar-right">
             <p><strong th:text="${profile.effectiveDisplayName}">Display Name</strong></p>
             <p th:text="'@' + ${profile.username}">@username</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>
 
 </div>