fix: Usability and Alignments changes (microsoft#48)

* Name update and padding removed

* fix home page padding and cards height

* remove gap in tasks section

Author: Kiran-Siluveru-Microsoft

src/frontend/wwwroot/app.html

@@ -14,16 +14,16 @@
         <div
             class="column asside border-right is-one-fifth is-flex is-flex-direction-column is-justify-content-space-between">
             <!-- App menu start -->
-            <aside class="menu mx-3 mt-6">
+            <aside class="menu mx-3 mt-5">
                 <strong id="goHomeButton" class="menu-logo is-flex is-align-items-center">
                     <img class="mr-3" src="../assets/app-logo.svg">
-                    <span>Multi-Agent - Custom Automation Engine</span>
+                    <span>Multi-Agent: Custom Automation Engine</span>
                 </strong>
                 <button id="newTaskButton" class="button is-fullwidth my-6">New task</button>
                 <p class="menu-label">My tasks</p>
                 <ul id="myTasksMenu" class="menu-list"></ul>
             </aside>
-            <aside class="menu mx-3 mb-6">
+            <aside class="menu mx-3">
                 <p class="menu-label">Status</p>
                 <ul id="tasksStats" class="menu-list"></ul>
                 <p class="menu-label"></p>

src/frontend/wwwroot/home/home.css

@@ -258,3 +258,12 @@ textarea:disabled {
 .send-button:hover {
   color: #0056b3;
 }
+
+.card.is-hoverable.quick-task > .card-content {
+  min-height: 225px;
+}
+
+.prompt-container {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}

src/frontend/wwwroot/home/home.html

@@ -16,7 +16,7 @@
             <div class="orb two"></div>
             <div class="orb three"></div>
         </div>
-        <section class="section is-flex is-flex-direction-column is-justify-content-center">
+        <section class="section is-flex is-flex-direction-column is-justify-content-center prompt-container">
             <img class="app-logo" src="../assets/app-logo.svg">
             <span class="title mb-0"> Task list <span class="assistants"> Assistants</span>  </span>
             <span class="description mt-0">Ask your AI team for help</span>

src/frontend/wwwroot/task/task.css

@@ -22,9 +22,6 @@
   margin: 3rem 1rem;
 }
 
-.task-asside .task-menu .menu-label:first-of-type {
-  margin-top: 137px;
-}
 
 .task-asside .title {
   font-size: 1.25rem;
@@ -35,6 +32,7 @@
 
 .task-details {
   width: 100%;
+  padding: 2rem;
 }
 .colChatSec {
   width: 55%;
@@ -269,3 +267,8 @@ textarea {
 .send-button:hover {
   color: #0056b3;
 }
+
+.menu.task-menu {
+  position: sticky;
+  top: 0;
+}