From 56bfecd58aa7e33bca850110635a44084bbd5a25 Mon Sep 17 00:00:00 2001
From: abhi-nav-25 <abhinav252006@gmail.com>
Date: Mon, 18 May 2026 23:08:00 +0530
Subject: [PATCH] fix: resolve skills form UI issues

---
 static/style.css     | 43 ++++++++++++++++++++++++++++++++-----------
 templates/index.html | 21 +++++++++++++--------
 2 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/static/style.css b/static/style.css
index 3b11ca9..7e15af7 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1959,18 +1959,39 @@ select:focus {
 }
 
 .tooltip {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 6px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
+  position: relative;
+  color: #6366f1;
+}
+
+.tooltip-text {
+  visibility: hidden;
+  opacity: 0;
+
+  position: absolute;
+  bottom: 130%;
+  left: 50%;
+  transform: translateX(-50%);
+
+  width: 260px;
+
   background: #6366f1;
-  color: white;
-  font-size: 11px;
-  cursor: help;
-  font-weight: 700;
+  color: #ffffff;
+
+  padding: 8px 10px;
+  border-radius: 8px;
+
+  font-size: 0.8rem;
+  line-height: 1.4;
+  font-weight: 400;
+
+  z-index: 1000;
+
+  transition: opacity 0.2s ease;
+}
+
+.tooltip:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
 }
 
 .form-hint {
diff --git a/templates/index.html b/templates/index.html
index 05ad04c..afe53ee 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -341,9 +341,11 @@ <h2 class="section-title">Find Your Next Project</h2>
               <div class="form-label-row" style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px;">
                 <label for="skills-input">
                   Your Skills
-                  <span class="tooltip"
-                    title="Add technologies, programming languages, or tools you know like Python, React, Git, SQL, etc.">
+                  <span class="tooltip">
                     ⓘ
+                    <span class="tooltip-text">
+                      Add technologies, programming languages, or tools you know like Python, React, Git, SQL, etc.
+                    </span>
                   </span>
                 </label>
                 
@@ -357,7 +359,6 @@ <h2 class="section-title">Find Your Next Project</h2>
               </div>
               <div class="skill-input-wrap" id="skill-input-wrap">
                 <div class="skill-chips-selected" id="skill-chips-selected"></div>
-                <input type="text" id="skills-input" placeholder="Type a skill and press Enter..." autocomplete="off" />
                 <input
                   type="text"
                   id="skills-input"
@@ -396,7 +397,7 @@ <h2 class="section-title">Find Your Next Project</h2>
               <button type="button" class="skill-chip" data-skill="Kotlin">Kotlin</button>
 
             </div>
-
+            <br><br>
             <!-- Level + Interest in a row -->
             <div class="form-row">
               <div class="form-group">
@@ -415,9 +416,11 @@ <h2 class="section-title">Find Your Next Project</h2>
               <div class="form-group">
                 <label for="interest">
                   Area of Interest
-                  <span class="tooltip"
-                    title="Choose the type of projects you enjoy building or want to learn more about.">
+                  <span class="tooltip">
                     ⓘ
+                    <span class="tooltip-text">
+                      Choose the type of projects you enjoy building or want to learn more about.
+                    </span>
                   </span>
                 </label>
                 <div class="select-wrap">
@@ -443,9 +446,11 @@ <h2 class="section-title">Find Your Next Project</h2>
         <div class="form-group">
           <label for="time">
             Time Availability
-            <span class="tooltip"
-              title="Estimate how much time you can realistically dedicate to building the project.">
+            <span class="tooltip">
               ⓘ
+              <span class="tooltip-text">
+                Estimate how much time you can realistically dedicate to building the project.
+              </span>
             </span>
           </label>
           <div class="select-wrap">