fix: ui repsnsiveness and design

Author: huamanraj

apps/web/package.json

@@ -28,7 +28,6 @@
     "framer-motion": "^11.15.0",
     "geist": "^1.5.1",
     "gray-matter": "^4.0.3",
-    "sanitize-html": "^2.11.0",
     "lucide-react": "^0.456.0",
     "marked": "^17.0.0",
     "next": "15.5.3",
@@ -39,6 +38,7 @@
     "react-dom": "^18.2.0",
     "react-qr-code": "^2.0.18",
     "react-tweet": "^3.2.1",
+    "sanitize-html": "^2.11.0",
     "superjson": "^2.2.5",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
@@ -50,6 +50,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/sanitize-html": "^2.16.0",
     "depcheck": "^1.4.7",
     "eslint": "^8",
     "eslint-config-next": "15.0.2",

apps/web/src/app/(main)/dashboard/layout.tsx

@@ -16,7 +16,7 @@ export default function DashboardLayout({
   const { showFilters } = useFilterStore();
   const { showSidebar, setShowSidebar } = useShowSidebar();
   return (
-    <div className="flex w-screen h-screen bg-dash-base overflow-hidden">
+    <div className="flex w-full h-screen bg-dash-base overflow-hidden">
       {showFilters && <FiltersContainer />}
       <aside className="hidden xl:block h-full">
         <Sidebar />

apps/web/src/app/(main)/dashboard/oss-programs/ProgramsList.tsx

@@ -30,11 +30,13 @@ export default function ProgramsList({ programs, tags }: ProgramsListProps) {
   }, [programs, searchQuery, selectedTags]);
 
   return (
-    <div className="min-h-screen w-full bg-[#1e1e1e] text-white p-4 md:p-8 lg:p-12">
-      <div className="max-w-6xl mx-auto">
+    <div className="min-h-full w-full max-w-[100vw] bg-[#1e1e1e] text-white p-4 md:p-8 lg:p-12 overflow-x-hidden">
+      <div className="max-w-6xl mx-auto w-full">
         {/* Header Section */}
         <div className="flex flex-col gap-8 mb-12">
-          <h1 className="text-4xl font-bold text-white">OSS Programs</h1>
+          <h1 className="text-3xl md:text-4xl font-bold text-white break-words">
+            OSS Programs
+          </h1>
 
           <div className="flex flex-col md:flex-row gap-4 w-full">
             <SearchInput

apps/web/src/app/(main)/dashboard/oss-programs/[slug]/page.tsx

@@ -2,7 +2,11 @@ import { getProgramBySlug, getAllPrograms } from "@/data/oss-programs";
 import { notFound } from "next/navigation";
 import { marked } from "marked";
 import sanitizeHtml from "sanitize-html";
-import { ProgramHeader, ProgramMetadata, ProgramSection } from "@/components/oss-programs";
+import {
+  ProgramHeader,
+  ProgramMetadata,
+  ProgramSection,
+} from "@/components/oss-programs";
 import "./program-styles.css";
 
 export const revalidate = 3600;
@@ -76,7 +80,7 @@ export default async function ProgramPage({
   };
 
   return (
-    <main className="min-h-screen w-full bg-[#1e1e1e] text-white overflow-x-hidden">
+    <main className="min-h-screen w-full bg-dash-base text-white overflow-x-hidden">
       <div className="max-w-6xl mx-auto px-4 md:px-8 py-8 md:py-12 w-full">
         <ProgramHeader program={program} />
         <ProgramMetadata program={program} />

apps/web/src/app/(main)/dashboard/oss-programs/[slug]/program-styles.css

@@ -104,10 +104,63 @@
   border-radius: 50%;
 }
 
-.application-timeline ul li:first-child::before {
-  background: var(--color-success);
+.application-timeline ul li:first-child::before,
+.application-timeline ul li:last-child::before {
+  background: var(--color-primary);
 }
 
-.application-timeline ul li:last-child::before {
-  background: var(--color-warning);
+/* Mask the line above the first dot */
+.application-timeline ul li:first-child::after {
+  content: "";
+  position: absolute;
+  left: -2rem;
+  /* Cover the border area to the left */
+  top: 0;
+  width: 2rem;
+  height: 0.85rem;
+  /* Height up to the dot */
+  background: theme('colors.dash.base');
+  /* Match page background */
+  z-index: 1;
+}
+
+/* Mask the line below the last dot */
+.application-timeline ul li:last-child::after {
+  content: "";
+  position: absolute;
+  left: -2rem;
+  top: calc(0.85rem + 8px);
+  /* Start after the dot */
+  bottom: 0;
+  width: 2rem;
+  background: theme('colors.dash.base');
+  z-index: 1;
+}
+
+/* What this program is about section styling */
+.what-section p {
+  line-height: 2 !important;
+  /* Increased line spacing */
+  margin-bottom: 1.5rem !important;
+  /* More space between paragraphs */
+  color: #e5e5e5;
+  /* Slightly brighter text for clarity */
+}
+
+.what-section h3 {
+  margin-top: 3rem !important;
+  /* significantly more space before subsections like Duration/Stipend */
+  margin-bottom: 1rem !important;
+  color: var(--color-primary);
+  /* Highlight these headers */
 }
+
+.what-section h4 {
+  margin-top: 2.5rem !important;
+  margin-bottom: 0.75rem !important;
+}
+
+/* If Duration/Stipend are emphasized text at start of lines */
+.what-section p strong {
+  color: white;
+}

apps/web/src/components/oss-programs/ProgramCard.tsx

@@ -10,9 +10,9 @@ export default function ProgramCard({ program }: ProgramCardProps) {
   return (
     <Link
       href={`/dashboard/oss-programs/${program.slug}`}
-      className="group block"
+      className="group block w-full"
     >
-      <div className="bg-[#252525] border border-[#333] rounded-xl px-4 py-3 md:px-5 md:py-4 hover:border-[#9455f4]/50 hover:bg-[#2a2a2a] transition-all duration-200 flex items-center justify-between gap-3 md:gap-4">
+      <div className="w-full bg-[#252525] border border-[#333] rounded-xl px-4 py-3 md:px-5 md:py-4 hover:border-[#9455f4]/50 hover:bg-[#2a2a2a] transition-all duration-200 flex items-center justify-between gap-3 md:gap-4 overflow-hidden">
         <div className="flex-1 min-w-0">
           <h2 className="text-sm md:text-base font-semibold text-white group-hover:text-[#dcb8ff] transition-colors truncate">
             {program.name}
@@ -24,7 +24,9 @@ export default function ProgramCard({ program }: ProgramCardProps) {
 
         <div className="hidden md:flex items-center gap-6 flex-shrink-0">
           <div className="text-right">
-            <p className="text-xs text-gray-500 uppercase tracking-wide">Region</p>
+            <p className="text-xs text-gray-500 uppercase tracking-wide">
+              Region
+            </p>
             <p className="text-sm text-gray-300 capitalize">{program.region}</p>
           </div>
         </div>

apps/web/src/components/oss-programs/ProgramSection.tsx

@@ -8,16 +8,20 @@ interface ProgramSectionProps {
 
 const getSectionIcon = (sectionId: string) => {
   const icons: Record<string, React.ReactNode> = {
-    'what': <Info className="w-4 h-4" />,
-    'is-it-for-you': <User className="w-4 h-4" />,
-    'when': <Calendar className="w-4 h-4" />,
-    'how-to-prepare': <Rocket className="w-4 h-4" />,
-    'application-process': <FileText className="w-4 h-4" />,
+    what: <Info className="w-4 h-4" />,
+    "is-it-for-you": <User className="w-4 h-4" />,
+    when: <Calendar className="w-4 h-4" />,
+    "how-to-prepare": <Rocket className="w-4 h-4" />,
+    "application-process": <FileText className="w-4 h-4" />,
   };
   return icons[sectionId] || <Info className="w-4 h-4" />;
 };
 
-export default function ProgramSection({ id, title, contentHtml }: ProgramSectionProps) {
+export default function ProgramSection({
+  id,
+  title,
+  contentHtml,
+}: ProgramSectionProps) {
   return (
     <section id={id} className="scroll-mt-20">
       <h2 className="text-base md:text-lg lg:text-xl font-semibold mb-4 text-white flex items-center gap-2.5 tracking-tight">
@@ -40,9 +44,10 @@ export default function ProgramSection({ id, title, contentHtml }: ProgramSectio
           prose-code:text-[#dcb8ff] prose-code:bg-[#252525] prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-xs prose-code:md:text-sm prose-code:font-mono prose-code:before:content-[''] prose-code:after:content-[''] prose-code:break-all
           prose-pre:bg-[#252525] prose-pre:border prose-pre:border-[#333] prose-pre:rounded-lg prose-pre:p-4 prose-pre:overflow-x-auto prose-pre:my-5
           prose-blockquote:border-l-4 prose-blockquote:border-[#9455f4] prose-blockquote:pl-4 prose-blockquote:italic prose-blockquote:text-gray-400 prose-blockquote:my-5
-          ${id === 'application-process' ? 'application-timeline' : ''}
-          ${id === 'how-to-prepare' ? 'preparation-checklist' : ''}
-          ${id === 'is-it-for-you' ? 'eligibility-section' : ''}`}
+          ${id === "application-process" ? "application-timeline" : ""}
+          ${id === "how-to-prepare" ? "preparation-checklist" : ""}
+          ${id === "is-it-for-you" ? "eligibility-section" : ""}
+          ${id === "what" ? "what-section" : ""}`}
         dangerouslySetInnerHTML={{ __html: contentHtml }}
       />
     </section>