Fix input autofill, navbar element, and typings

Add a long CSS transition to neutralize Chrome's autofill background, preventing the yellow/blue autofill styling from showing. Replace the AppNavbar side menu <aside> with a <div> to match the component structure. Scope SigninForm styles (add scoped) and remove the preset input background so autofill styling is handled consistently. Add an explicit Workspace type import and annotate selectWorkspace(workspace) with the Workspace type.

Author: shweta2101

assets/scss/main.scss

@@ -1,5 +1,11 @@
 @import "theme.scss";
 @import "bootstrap/scss/bootstrap.scss";
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus {
+  transition: background-color 600000s, color 600000s;
+}
 @import "maplibre-gl/dist/maplibre-gl.css";
 @import "vue3-toastify/dist/index.css";
 

components/AppNavbar.vue

@@ -95,7 +95,7 @@
       @click="closeMobileMenu"
     />
 
-    <aside
+    <div
       id="appNavbarSideMenu"
       ref="sideMenuRef"
       class="sideMenu"
@@ -177,7 +177,7 @@
           <span>Logout</span>
         </button>
       </nav>
-    </aside>
+    </div>
   </nav>
 </template>
 

components/SigninForm.vue

@@ -147,7 +147,7 @@ async function signIn() {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .signin-card {
   width: 100%;
   max-width: 450px;
@@ -194,12 +194,10 @@ async function signIn() {
   min-height: 52px;
   border: 1px solid #d0d6e2;
   border-radius: 8px;
-  background-color: #eef2ff;
   color: #2f3661;
   font-size: 14px;
 
   &:focus {
-    background-color: #eef2ff;
     border-color: #c3cbde;
     box-shadow: none;
   }

pages/dashboard.vue

@@ -63,6 +63,7 @@
 
 <script setup lang="ts">
 import { tdeiUserClient, workspacesClient } from '~/services/index';
+import type { Workspace } from '~/types/workspaces';
 import { compareWorkspaceCreatedAtDesc } from '~/services/workspaces';
 
 const STORAGE_KEY_PROJECT_GROUP = 'tdei-selected-project-group';
@@ -175,7 +176,7 @@ function onCenterLoaded(center) {
   currentWorkspace.value!.center = center;
 }
 
-async function selectWorkspace(workspace) {
+async function selectWorkspace(workspace: Workspace) {
   currentWorkspace.value = workspace;
 }
 </script>