fix(ui): fix right side corners of oss programs card

Author: apsinghdev

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

@@ -30,15 +30,15 @@ export default function ProgramsList({ programs, tags }: ProgramsListProps) {
   }, [programs, searchQuery, selectedTags]);
 
   return (
-    <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">
+    <div className="min-h-full w-[99vw] lg:w-[80vw] bg-dash-base text-white p-4 md:p-8 lg:p-12 overflow-x-hidden">
+      <div className="max-w-6xl mx-auto w-full min-w-0">
         {/* Header Section */}
-        <div className="flex flex-col gap-8 mb-12">
-          <h1 className="text-3xl md:text-4xl font-bold text-white break-words">
+        <div className="flex flex-col gap-8 mb-12 min-w-0">
+          <h1 className="text-3xl md:text-4xl font-bold text-text-primary break-words">
             OSS Programs
           </h1>
 
-          <div className="flex flex-col md:flex-row gap-4 w-full">
+          <div className="flex flex-col md:flex-row gap-4 w-full min-w-0">
             <SearchInput
               value={searchQuery}
               onChange={setSearchQuery}
@@ -53,9 +53,9 @@ export default function ProgramsList({ programs, tags }: ProgramsListProps) {
         </div>
 
         {/* List Section */}
-        <div className="flex flex-col gap-2 md:gap-3">
+        <div className="flex flex-col gap-2 md:gap-3 min-w-0">
           {filteredPrograms.length === 0 ? (
-            <div className="text-center py-20 text-gray-500">
+            <div className="text-center py-20 text-text-muted">
               No programs found matching your criteria.
             </div>
           ) : (

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

@@ -10,28 +10,28 @@ export default function ProgramCard({ program }: ProgramCardProps) {
   return (
     <Link
       href={`/dashboard/oss-programs/${program.slug}`}
-      className="group block w-full"
+      className="group block w-full min-w-0"
     >
-      <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="w-full bg-dash-surface border border-dash-border rounded-xl px-4 py-3 md:px-5 md:py-4 hover:border-brand-purple/50 hover:bg-dash-hover transition-all duration-200 flex items-center justify-between gap-3 md:gap-4 min-w-0">
         <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">
+          <h2 className="text-sm md:text-base font-semibold text-text-primary group-hover:text-brand-purple-light transition-colors truncate">
             {program.name}
           </h2>
-          <p className="text-gray-500 text-xs md:text-sm mt-0.5 truncate">
+          <p className="text-text-tertiary text-xs md:text-sm mt-0.5 truncate">
             {program.shortDescription}
           </p>
         </div>
 
         <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">
+            <p className="text-xs text-text-muted uppercase tracking-wide">
               Region
             </p>
-            <p className="text-sm text-gray-300 capitalize">{program.region}</p>
+            <p className="text-sm text-text-secondary capitalize">{program.region}</p>
           </div>
         </div>
 
-        <div className="flex-shrink-0 text-gray-500 group-hover:text-[#9455f4] transition-all duration-200 group-hover:translate-x-1">
+        <div className="flex-shrink-0 text-text-muted group-hover:text-brand-purple transition-all duration-200 group-hover:translate-x-1">
           <ChevronRight className="w-4 h-4 md:w-5 md:h-5" />
         </div>
       </div>

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

@@ -10,14 +10,14 @@ interface SearchInputProps {
 
 export default function SearchInput({ value, onChange, placeholder = "Search programs..." }: SearchInputProps): JSX.Element {
   return (
-    <div className="relative flex-1">
+    <div className="relative flex-1 min-w-0">
       <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5 pointer-events-none z-10" />
       <input
         type="text"
         placeholder={placeholder}
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        className="w-full bg-dash-surface border border-dash-border rounded-xl py-3 pl-12 pr-4 text-text-primary placeholder-gray-500 focus:outline-none focus:border-brand-purple transition-colors truncate"
+        className="w-full bg-dash-surface border border-dash-border rounded-xl py-3 pl-12 pr-4 text-text-primary placeholder-gray-500 focus:outline-none focus:border-brand-purple transition-colors"
         aria-label="Search programs"
       />
     </div>

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

@@ -52,15 +52,15 @@ export default function TagFilter({ tags, selectedTags, onTagsChange }: TagFilte
   };
 
   return (
-    <div className="relative flex-1" ref={dropdownRef}>
+    <div className="relative flex-1 min-w-0" ref={dropdownRef}>
       <div
-        className="flex items-center gap-2 bg-dash-surface border border-dash-border rounded-xl p-2 min-h-[50px] focus-within:border-brand-purple transition-colors cursor-text"
+        className="flex items-center gap-2 bg-dash-surface border border-dash-border rounded-xl p-2 min-h-[50px] focus-within:border-brand-purple transition-colors cursor-text min-w-0"
         onClick={() => {
           inputRef.current?.focus();
           setIsDropdownOpen(true);
         }}
       >
-        <div className="flex flex-wrap items-center gap-2 flex-1 min-w-0 overflow-hidden">
+        <div className="flex flex-wrap items-center gap-2 flex-1 min-w-0">
           {selectedTags.map((tag) => (
             <span
               key={tag}
@@ -90,7 +90,7 @@ export default function TagFilter({ tags, selectedTags, onTagsChange }: TagFilte
             }}
             onKeyDown={handleKeyDown}
             onFocus={() => setIsDropdownOpen(true)}
-            className="bg-transparent text-white placeholder-gray-500 focus:outline-none flex-1 min-w-[120px]"
+            className="bg-transparent text-white placeholder-gray-500 focus:outline-none flex-1 min-w-0"
           />
         </div>
         <ChevronDown className="w-5 h-5 text-gray-400 flex-shrink-0" />