Merge pull request #863 from trycompai/claudio/ui-tweaks-2

[dev] [claudfuen] claudio/ui-tweaks-2

Author: claudfuen

apps/app/src/app/(app)/[orgId]/controls/[controlId]/components/RequirementsTable.tsx

@@ -41,9 +41,10 @@ interface RequirementsTableProps {
 						title={"Name"}
 					/>
 				),
+
 				cell: ({ row }) => {
 					return (
-						<span>
+						<span className="line-clamp-2 truncate max-w-[600px] h-10 text-wrap">
 							{row.original.requirement.name}
 						</span>
 					);
@@ -67,7 +68,7 @@ interface RequirementsTableProps {
 				),
 				cell: ({ row }) => {
 					return (
-						<span className="text-muted-foreground">
+						<span className="line-clamp-2 truncate max-w-[600px] h-10 text-wrap">
 							{row.original.requirement.description}
 						</span>
 					);

apps/app/src/app/(app)/[orgId]/frameworks/[frameworkInstanceId]/components/FrameworkRequirements.tsx

@@ -52,7 +52,7 @@ export function FrameworkRequirements({
 					<DataTableColumnHeader column={column} title={"Name"} />
 				),
 				cell: ({ row }) => (
-					<span className="capitalize line-clamp-1">
+					<span className="line-clamp-2 truncate max-w-[300px]">
 						{row.original.name}
 					</span>
 				),
@@ -76,7 +76,7 @@ export function FrameworkRequirements({
 					/>
 				),
 				cell: ({ row }) => (
-					<span className="capitalize line-clamp-1">
+					<span className="line-clamp-2 truncate max-w-[300px]">
 						{row.original.description}
 					</span>
 				),

apps/app/src/app/(app)/[orgId]/frameworks/[frameworkInstanceId]/requirements/[requirementKey]/components/RequirementControls.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import type { FrameworkEditorRequirement } from "@comp/db/types";
-import { Card, CardContent, CardHeader, CardTitle } from "@comp/ui/card";
-import { FrameworkInstanceWithControls } from "../../../../types";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@comp/ui/card";
 import { RequirementControlsTable } from "./table/RequirementControlsTable";
 import type { Control, RequirementMap, Task } from "@comp/db/types";
 
@@ -21,30 +20,14 @@ export function RequirementControls({
 		<div className="space-y-6">
 			<Card>
 				<CardHeader>
-					<CardTitle className="flex items-center justify-between">
-						<div>
-							<span className="text-sm text-muted-foreground">
-								{"Requirement"}
-							</span>
-							<h1 className="text-2xl font-semibold">
-								{requirement.name}
-							</h1>
-						</div>
-					</CardTitle>
+					<CardTitle>{requirement.name}</CardTitle>
+					<CardDescription>{requirement.description}</CardDescription>
 				</CardHeader>
-				<CardContent>
-					<p className="text-sm text-muted-foreground">
-						{requirement.description}
-					</p>
-				</CardContent>
 			</Card>
 
 			<Card>
 				<CardHeader>
-					<CardTitle>
-						{"Controls"} (
-						{relatedControls.length})
-					</CardTitle>
+					<CardTitle>Controls ({relatedControls.length})</CardTitle>
 				</CardHeader>
 				<CardContent>
 					<RequirementControlsTable

apps/app/src/app/(app)/[orgId]/frameworks/[frameworkInstanceId]/requirements/[requirementKey]/page.tsx

@@ -93,6 +93,8 @@ export default async function RequirementPage({ params }: PageProps) {
 
 	console.log("relatedControls", relatedControls);
 
+	const maxLabelLength = 40;
+
 	return (
 		<PageWithBreadcrumb
 			breadcrumbs={[
@@ -102,7 +104,7 @@ export default async function RequirementPage({ params }: PageProps) {
 					href: `/${organizationId}/frameworks/${frameworkInstanceId}`,
 				},
 				{
-					label: currentRequirementDetails.name,
+					label: currentRequirementDetails.name.length > maxLabelLength ? `${currentRequirementDetails.name.slice(0, maxLabelLength)}...` : currentRequirementDetails.name,
 					dropdown: siblingRequirementsDropdown,
 					current: true,
 				},

apps/app/src/app/(app)/[orgId]/layout.tsx

@@ -62,7 +62,7 @@ export default async function Layout({
 				)}
 				<Header />
 				<div
-					className="px-4 mx-auto py-4"
+					className="px-4 mx-auto py-4 textured-background"
 					style={{ minHeight: `calc(100vh - ${pixelsOffset}px)` }}
 				>
 					{children}

apps/app/src/app/(app)/[orgId]/policies/(overview)/page.tsx

@@ -12,7 +12,7 @@ export default async function PoliciesOverview() {
 
 	return (
 		<Suspense fallback={<Loading />}>
-			<div className="space-y-4 sm:space-y-8">
+			<div className="space-y-4 sm:space-y-8 py-4">
 				<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
 					<PolicyStatusChart data={overview} />
 					<PolicyAssigneeChart data={overview?.assigneeData} />

apps/app/src/app/(app)/[orgId]/policies/[policyId]/layout.tsx

@@ -9,7 +9,7 @@ export default async function Layout({ children, params }: LayoutProps) {
 	const { orgId } = await params;
 
 	return (
-		<div className="max-w-[1200px] m-auto flex flex-col gap-4">
+		<div className="max-w-[1200px] m-auto flex flex-col">
 			<SecondaryMenu
 				items={[
 					{

apps/app/src/app/(app)/[orgId]/policies/all/layout.tsx

@@ -6,28 +6,20 @@ import { cn } from "@comp/ui/cn";
 import { useQueryState } from "nuqs";
 
 export function AssistantButton() {
-	const isDesktop = useMediaQuery("(min-width: 768px)");
+
 	const [, setAssistantOpen] = useQueryState("assistant", {
 		history: "push",
 		parse: (value) => value === "true",
 		serialize: (value) => value.toString(),
 	});
 
-	if (!isDesktop) {
-		return null;
-	}
-
 	return (
 		<Button
 			variant="ghost"
 			size="default"
-			// className={cn(
-			// 	"relative w-full max-w-sm justify-start text-muted-foreground",
-			// 	"hover:bg-accent hover:text-accent-foreground"
-			// )}
 			onClick={() => setAssistantOpen(true)}
 		>
-			<span className="truncate">Ask Comp AI a question...</span>
+			<span className="truncate">Ask a question...</span>
 			<kbd className="ml-auto flex h-5 items-center gap-1 rounded-sm border bg-muted px-1.5 font-mono text-[10px] font-medium">
 				<span className="text-xs">⌘</span>K
 			</kbd>