style(frontend): changed style for several views

Author: Lasim

package-lock.json

@@ -1,5 +1,64 @@
 # Changelog
 
+## 0.31.0 (2025-10-09)
+
+* chore(all): bump @commitlint/cli from 19.8.1 to 20.1.0 ([9eb3189](https://github.com/deploystackio/deploystack/commit/9eb3189))
+* chore(all): bump @octokit/request from 10.0.3 to 10.0.5 ([d93fabf](https://github.com/deploystackio/deploystack/commit/d93fabf))
+* chore(all): bump @tailwindcss/postcss from 4.1.13 to 4.1.14 ([fd43779](https://github.com/deploystackio/deploystack/commit/fd43779))
+* chore(all): bump drizzle-kit from 0.31.4 to 0.31.5 ([18f93d4](https://github.com/deploystackio/deploystack/commit/18f93d4))
+* chore(all): bump drizzle-orm from 0.44.5 to 0.44.6 ([0b92ebf](https://github.com/deploystackio/deploystack/commit/0b92ebf))
+* chore(all): bump jest from 30.1.3 to 30.2.0 ([7c70f0a](https://github.com/deploystackio/deploystack/commit/7c70f0a))
+* chore(all): bump jiti from 2.6.0 to 2.6.1 ([9051c83](https://github.com/deploystackio/deploystack/commit/9051c83))
+* chore(all): bump pino from 9.11.0 to 10.0.0 ([7845a12](https://github.com/deploystackio/deploystack/commit/7845a12))
+* chore(all): bump tailwindcss from 4.1.13 to 4.1.14 ([e6e06c3](https://github.com/deploystackio/deploystack/commit/e6e06c3))
+* chore(all): bump vue-sonner from 2.0.8 to 2.0.9 ([ad873f0](https://github.com/deploystackio/deploystack/commit/ad873f0))
+* chore(all): bump vue-tsc from 3.0.8 to 3.1.1 ([8f93277](https://github.com/deploystackio/deploystack/commit/8f93277))
+* chore(all): bump zod-openapi from 5.4.1 to 5.4.2 ([35a5b7f](https://github.com/deploystackio/deploystack/commit/35a5b7f))
+* chore(backend): bump @commitlint/cli in /services/backend ([f303c24](https://github.com/deploystackio/deploystack/commit/f303c24))
+* chore(backend): update welcome email template for new users ([756e607](https://github.com/deploystackio/deploystack/commit/756e607))
+* chore(frontend): bump @types/marked in /services/frontend ([5f4ddd3](https://github.com/deploystackio/deploystack/commit/5f4ddd3))
+* chore(frontend): release v0.31.0 ([6c626f8](https://github.com/deploystackio/deploystack/commit/6c626f8))
+* chore(frontend): remove unused @types/marked dependency from package.json ([44f88ad](https://github.com/deploystackio/deploystack/commit/44f88ad))
+* chore(satellite): release v0.4.1 ([5ebb468](https://github.com/deploystackio/deploystack/commit/5ebb468))
+* chore(satellite): release v0.4.1 ([6594669](https://github.com/deploystackio/deploystack/commit/6594669))
+* feat(all): Enhanced Job Queue Management - Search & Filtering ([6517f1e](https://github.com/deploystackio/deploystack/commit/6517f1e))
+* feat(backend): add tags filtering to MCP servers API and implement endpoint to retrieve unique tags ([45f7088](https://github.com/deploystackio/deploystack/commit/45f7088))
+* feat(frontend): add hover card for Python MCP server installation warning ([df0d271](https://github.com/deploystackio/deploystack/commit/df0d271))
+* feat(frontend): add runtime and tags display to MCP server card ([3b22e37](https://github.com/deploystackio/deploystack/commit/3b22e37))
+* feat(frontend): add skeleton loading state for MCP server selection ([2653bb4](https://github.com/deploystackio/deploystack/commit/2653bb4))
+* feat(frontend): implement ButtonGroup component with variants ([23a0418](https://github.com/deploystackio/deploystack/commit/23a0418))
+
+## 0.31.0 (2025-10-09)
+
+* feat(all): Enhanced Job Queue Management - Search & Filtering ([6517f1e](https://github.com/deploystackio/deploystack/commit/6517f1e))
+* feat(backend): add tags filtering to MCP servers API and implement endpoint to retrieve unique tags ([45f7088](https://github.com/deploystackio/deploystack/commit/45f7088))
+* feat(frontend): add hover card for Python MCP server installation warning ([df0d271](https://github.com/deploystackio/deploystack/commit/df0d271))
+* feat(frontend): add runtime and tags display to MCP server card ([3b22e37](https://github.com/deploystackio/deploystack/commit/3b22e37))
+* feat(frontend): add skeleton loading state for MCP server selection ([2653bb4](https://github.com/deploystackio/deploystack/commit/2653bb4))
+* feat(frontend): implement ButtonGroup component with variants ([23a0418](https://github.com/deploystackio/deploystack/commit/23a0418))
+* chore(all): bump @commitlint/cli from 19.8.1 to 20.1.0 ([9eb3189](https://github.com/deploystackio/deploystack/commit/9eb3189))
+* chore(all): bump @octokit/request from 10.0.3 to 10.0.5 ([d93fabf](https://github.com/deploystackio/deploystack/commit/d93fabf))
+* chore(all): bump @tailwindcss/postcss from 4.1.13 to 4.1.14 ([fd43779](https://github.com/deploystackio/deploystack/commit/fd43779))
+* chore(all): bump drizzle-kit from 0.31.4 to 0.31.5 ([18f93d4](https://github.com/deploystackio/deploystack/commit/18f93d4))
+* chore(all): bump drizzle-orm from 0.44.5 to 0.44.6 ([0b92ebf](https://github.com/deploystackio/deploystack/commit/0b92ebf))
+* chore(all): bump jest from 30.1.3 to 30.2.0 ([7c70f0a](https://github.com/deploystackio/deploystack/commit/7c70f0a))
+* chore(all): bump jiti from 2.6.0 to 2.6.1 ([9051c83](https://github.com/deploystackio/deploystack/commit/9051c83))
+* chore(all): bump pino from 9.11.0 to 10.0.0 ([7845a12](https://github.com/deploystackio/deploystack/commit/7845a12))
+* chore(all): bump tailwindcss from 4.1.13 to 4.1.14 ([e6e06c3](https://github.com/deploystackio/deploystack/commit/e6e06c3))
+* chore(all): bump vue-sonner from 2.0.8 to 2.0.9 ([ad873f0](https://github.com/deploystackio/deploystack/commit/ad873f0))
+* chore(all): bump vue-tsc from 3.0.8 to 3.1.1 ([8f93277](https://github.com/deploystackio/deploystack/commit/8f93277))
+* chore(all): bump zod-openapi from 5.4.1 to 5.4.2 ([35a5b7f](https://github.com/deploystackio/deploystack/commit/35a5b7f))
+* chore(backend): bump @commitlint/cli in /services/backend ([f303c24](https://github.com/deploystackio/deploystack/commit/f303c24))
+* chore(backend): release v0.36.0 ([dacf1af](https://github.com/deploystackio/deploystack/commit/dacf1af))
+* chore(backend): release v0.36.0 ([6bdfbcf](https://github.com/deploystackio/deploystack/commit/6bdfbcf))
+* chore(backend): update welcome email template for new users ([756e607](https://github.com/deploystackio/deploystack/commit/756e607))
+* chore(frontend): bump @types/marked in /services/frontend ([5f4ddd3](https://github.com/deploystackio/deploystack/commit/5f4ddd3))
+* chore(frontend): remove unused @types/marked dependency from package.json ([44f88ad](https://github.com/deploystackio/deploystack/commit/44f88ad))
+* chore(satellite): release v0.4.0 ([666b992](https://github.com/deploystackio/deploystack/commit/666b992))
+* chore(satellite): release v0.4.0 ([42091ab](https://github.com/deploystackio/deploystack/commit/42091ab))
+* chore(satellite): release v0.4.1 ([5ebb468](https://github.com/deploystackio/deploystack/commit/5ebb468))
+* chore(satellite): release v0.4.1 ([6594669](https://github.com/deploystackio/deploystack/commit/6594669))
+
 ## 0.30.0 (2025-10-06)
 
 * chore(all): update dependencies and improve package configurations ([a9ed054](https://github.com/deploystackio/deploystack/commit/a9ed054))

services/frontend/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@deploystack/frontend",
-  "version": "0.30.0",
+  "version": "0.31.0",
   "private": true,
   "type": "module",
   "scripts": {

services/frontend/package.json

@@ -218,7 +218,7 @@ onUnmounted(() => {
         <SidebarMenuItem>
           <DropdownMenu>
             <DropdownMenuTrigger as-child>
-              <SidebarMenuButton size="lg" class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+              <SidebarMenuButton size="lg" class="bg-white border border-sidebar-foreground/20 data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
                 <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground">
                   <Users class="size-4" />
                 </div>

services/frontend/src/components/AppSidebar.vue

@@ -14,7 +14,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  maxWidth: 'lg',
+  maxWidth: '2xl',
   background: true,
   padding: 'lg',
   noCard: false
@@ -35,17 +35,18 @@ const maxWidthClasses = computed(() => {
 // Compute padding classes
 const paddingClasses = computed(() => {
   const paddingMap = {
-    'sm': 'py-8',
-    'md': 'py-12',
-    'lg': 'py-16'
+    'sm': 'py-4',
+    'md': 'py-4',
+    'lg': 'py-4'
   }
   return paddingMap[props.padding]
 })
 
 // Compute container classes
 const containerClasses = computed(() => {
   const baseClasses = props.background
-    ? 'bg-muted/50 rounded-lg sm:rounded-lg'
+    // ? 'bg-muted/50 rounded-lg sm:rounded-lg'
+    ? ''
     : ''
   return baseClasses
 })
@@ -54,10 +55,10 @@ const containerClasses = computed(() => {
 <template>
   <div :class="containerClasses">
     <div :class="paddingClasses">
-      <div class="mx-auto max-w-7xl sm:px-2 lg:px-8">
+      <div class="mx-auto max-w-7xl">
         <div :class="['mx-auto px-4 lg:px-0', maxWidthClasses]">
           <!-- White Card wrapper (default) -->
-          <Card v-if="!noCard" class="bg-white shadow-sm py-3">
+          <Card v-if="!noCard" class="bg-white py-3">
             <CardContent class="p-6">
               <slot />
             </CardContent>

services/frontend/src/components/ContentWrapper.vue

@@ -76,16 +76,21 @@ const isPythonServer = (runtime: string | null | undefined) => {
   if (!runtime) return false
   return runtime.toLowerCase() === 'python'
 }
+
+const truncateServerName = (name: string, maxLength: number = 30) => {
+  if (name.length <= maxLength) return name
+  return name.substring(0, maxLength) + '...'
+}
 </script>
 
 <template>
   <div>
     <h2 class="sr-only">Server Details</h2>
-    <div class="rounded-lg bg-gray-50 border-[6px] border-gray-200">
+    <div class="rounded-lg bg-white border-[6px] border-gray-200">
       <dl class="flex flex-wrap">
         <div class="flex-auto pt-6 pl-6">
           <dt
-            class="text-sm/6 font-semibold text-gray-900 cursor-pointer hover:text-teal-700 transition-colors flex items-center gap-2"
+            class="text-sm/6 font-semibold text-gray-900 cursor-pointer hover:text-teal-700 transition-colors flex items-center gap-2 truncate"
             @click="handleServerClick"
             :title="`View ${server.name} details`"
           >
@@ -96,7 +101,7 @@ const isPythonServer = (runtime: string | null | undefined) => {
               class="h-8 w-8 rounded-md flex-shrink-0"
               @error="($event.target as HTMLImageElement).style.display = 'none'"
             />
-            {{ server.name }}
+            <span class="truncate">{{ truncateServerName(server.name) }}</span>
           </dt>
         </div>
         <div class="flex-none pt-6 pr-6">

services/frontend/src/components/mcp-server/McpServerSquareCard.vue

@@ -12,7 +12,7 @@ const props = defineProps<{
     data-slot="card"
     :class="
       cn(
-        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6',
         props.class,
       )
     "

services/frontend/src/components/ui/card/Card.vue

@@ -148,16 +148,16 @@ const tabClasses = computed(() => {
       baseClasses.push(
         'rounded-md transition-colors',
         isActive.value
-          ? 'bg-background text-foreground shadow-sm border border-border'
+          ? 'bg-white text-foreground shadow-sm border border-border'
           : 'text-muted-foreground hover:text-foreground hover:bg-muted'
       )
       break
     default:
       baseClasses.push(
         'rounded-md transition-colors',
         isActive.value
-          ? 'bg-muted text-foreground'
-          : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+          ? 'bg-primary text-white border border-primary'
+          : 'bg-white text-muted-foreground hover:text-foreground hover:bg-muted/50 border border-transparent'
       )
   }
 

services/frontend/src/components/ui/ds-tabs/DsTabsItem.vue

@@ -73,21 +73,21 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
     />
     <div
       :class="cn(
-        'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+        'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex bg-[#F6F6F6]',
         side === 'left'
           ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
           : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
         // Adjust the padding for floating and inset variants.
         variant === 'floating' || variant === 'inset'
           ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l border-[#F6F6F6]',
         props.class,
       )"
       v-bind="$attrs"
     >
       <div
         data-sidebar="sidebar"
-        class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        class="bg-[#F6F6F6] group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
       >
         <slot />
       </div>

services/frontend/src/components/ui/sidebar/Sidebar.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
   <main
     data-slot="sidebar-inset"
     :class="cn(
-      'bg-background relative flex w-full flex-1 flex-col',
+      'bg-[#FCFBFC] relative flex w-full flex-1 flex-col',
       'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
       props.class,
     )"