minor ui fixes (#104)

Author: edwnl

frontend/src/app/jobs/[id]/page.tsx

@@ -25,7 +25,7 @@ export default async function JobDetailPage({ params }: PageProps) {
   return (
     <FilterProvider>
       <div className="h-screen max-w-4xl mx-auto overflow-hidden flex flex-col">
-        <div className="flex-grow overflow-y-auto mb-20 pb-12 mt-2">
+        <div className="overflow-y-auto h-[calc(100svh-120px)] lg:h-[calc(100svh-180px)]">
           <JobDetailsWrapper job={job} />
         </div>
       </div>

frontend/src/app/jobs/page.tsx

@@ -38,7 +38,7 @@ export default async function JobsPage({
             </Suspense>
           </div>
 
-          <div className="hidden lg:block lg:w-[65%] overflow-y-auto h-[calc(100svh-150px)] lg:h-[calc(100svh-180px)]">
+          <div className="hidden lg:block lg:w-[65%] overflow-y-auto h-[calc(100svh-140px)] lg:h-[calc(100svh-180px)]">
             <Suspense fallback={<JobDetailsLoading />}>
               <JobDetails />
             </Suspense>

frontend/src/components/jobs/company-logo.tsx

@@ -1,30 +1,95 @@
-// frontend/src/components/ui/company-logo.tsx
+// frontend/src/components/jobs/company-logo.tsx
 import { Image } from "@mantine/core";
+import { useState } from "react";
 
 interface CompanyLogoProps {
   name: string;
   logo?: string;
+  applicationUrl?: string;
   className?: string;
 }
 
 export default function CompanyLogo({
   name,
   logo,
+  applicationUrl,
   className = "",
 }: CompanyLogoProps) {
   const baseClasses = "object-contain rounded-md bg-white";
+  const [logoFailed, setLogoFailed] = useState(false);
+  const [clearbitFailed, setClearbitFailed] = useState(false);
 
-  if (logo) {
+  // Function to extract base domain from URL
+  const extractBaseDomain = (url: string): string => {
+    try {
+      const urlObj = new URL(url);
+      return urlObj.hostname;
+    } catch {
+      return "";
+    }
+  };
+
+  // Check if URL should be skipped for logo generation
+  const shouldSkipUrl = (url: string): boolean => {
+    const skipDomains = [
+      "bit.ly",
+      "tinyurl.com",
+      "goo.gl",
+      "gradconnection.com",
+      "gradconnect.com",
+      "prosple.com",
+      "linkedin.com",
+      "lnkd.in",
+      "surveymonkey.com",
+      "forms.gle",
+    ];
+
+    try {
+      const domain = new URL(url).hostname;
+      return skipDomains.some((skipDomain) => domain.includes(skipDomain));
+    } catch {
+      return true;
+    }
+  };
+
+  // Render the fallback with first letter or question mark
+  const renderFallback = () => {
+    return (
+      <div
+        className={`${baseClasses} flex items-center justify-center ${className}`}
+      >
+        <div>{name ? name.charAt(0).toUpperCase() : "?"}</div>
+      </div>
+    );
+  };
+
+  // Case 1: Try company logo first
+  if (logo && !logoFailed) {
     return (
-      <Image alt={name} src={logo} className={`${baseClasses} ${className}`} />
+      <Image
+        alt={name || "Company"}
+        src={logo}
+        className={`${baseClasses} ${className}`}
+        onError={() => setLogoFailed(true)}
+      />
     );
   }
 
-  return (
-    <div
-      className={`${baseClasses} flex items-center justify-center ${className}`}
-    >
-      <div>{name.charAt(0).toUpperCase()}</div>
-    </div>
-  );
+  // Case 2: Try Clearbit logo from application URL
+  if (applicationUrl && !shouldSkipUrl(applicationUrl) && !clearbitFailed) {
+    const domain = extractBaseDomain(applicationUrl);
+    if (domain) {
+      return (
+        <Image
+          alt={name || "Company"}
+          src={`https://logo.clearbit.com/${domain}`}
+          className={`${baseClasses} ${className}`}
+          onError={() => setClearbitFailed(true)}
+        />
+      );
+    }
+  }
+
+  // Case 3 & 4: Fallback to initial letter or question mark
+  return renderFallback();
 }

frontend/src/components/jobs/job-card.tsx

@@ -28,6 +28,7 @@ export default function JobCard({ job, isSelected }: JobCardProps) {
           <div className={"flex flex-1 min-w-0"}>
             <CompanyLogo
               name={job.company.name}
+              applicationUrl={job.application_url}
               logo={job.company.logo}
               className="mr-2 lg:h-14 lg:w-14 h-10 w-10"
             />
@@ -36,7 +37,7 @@ export default function JobCard({ job, isSelected }: JobCardProps) {
                 "flex justify-center flex-col flex-1 min-w-0 space-y-0.5"
               }
             >
-              <span className="text-md font-bold line-clamp-2 leading-tight pr-2">
+              <span className="text-sm lg:text-md font-bold line-clamp-2 leading-tight pr-2">
                 {job.title}
               </span>
               <span className="text-xs truncate">{job.company.name}</span>
@@ -50,7 +51,7 @@ export default function JobCard({ job, isSelected }: JobCardProps) {
           dangerouslySetInnerHTML={{
             __html: DOMPurify.sanitize(washedDescription),
           }}
-          className="text-xs line-clamp-2 lg:line-clamp-3 mb-2"
+          className="text-xs line-clamp-3 lg:line-clamp-3 mb-2"
         />
       </div>
 
@@ -71,6 +72,7 @@ export default function JobCard({ job, isSelected }: JobCardProps) {
         )}
         {job.locations && job.locations.length > 0 && (
           <Badge
+            className={"hidden lg:inline"}
             text={`${job.locations
               .slice(0, 2)
               .map((loc) => formatCapString(loc))

frontend/src/components/jobs/job-description.tsx

@@ -2,6 +2,7 @@
 import SectionHeading from "@/components/ui/section-heading";
 import { TypographyStylesProvider } from "@mantine/core";
 import DOMPurify from "isomorphic-dompurify";
+import { IconBook } from "@tabler/icons-react";
 
 interface JobDescriptionProps {
   description: string;
@@ -10,7 +11,10 @@ interface JobDescriptionProps {
 export default function JobDescription({ description }: JobDescriptionProps) {
   return (
     <div className="flex flex-col mt-4">
-      <SectionHeading title="Job Description" />
+      <SectionHeading
+        title="Job Description"
+        icon={<IconBook size={16} stroke={1.5} />}
+      />
       <TypographyStylesProvider>
         <div
           dangerouslySetInnerHTML={{

frontend/src/components/jobs/job-details.tsx

@@ -7,6 +7,7 @@ import { useFilterContext } from "@/context/filter/filter-context";
 import JobDescription from "@/components/jobs/job-description";
 import JobHeader from "@/components/jobs/job-header";
 import JobDetailsLoading from "@/components/layout/job-details-loading";
+import JobSummary from "@/components/jobs/job-summary";
 
 export default function JobDetails() {
   const { selectedJob, isLoading } = useFilterContext();
@@ -64,7 +65,12 @@ export default function JobDetails() {
         viewportRef={scrollRef}
       >
         <JobHeader job={selectedJob} />
-        <JobDescription description={selectedJob.description || ""} />
+        {selectedJob && selectedJob.one_liner && (
+          <JobSummary one_liner={selectedJob.one_liner} />
+        )}
+        {selectedJob && selectedJob.description && (
+          <JobDescription description={selectedJob.description || ""} />
+        )}
       </ScrollArea>
 
       <div className="flex justify-between items-center mt-4 gap-4">

frontend/src/components/jobs/job-header.tsx

@@ -38,38 +38,38 @@ export default function JobHeader({ job }: JobHeaderProps) {
         <div className="flex flex-wrap gap-3">
           {/* Location */}
           <InfoTag
-            icon={<IconMapPin size={18} stroke={1.5} />}
+            icon={<IconMapPin size={16} stroke={1.5} />}
             text={job.locations
               ?.map((location) => formatCapString(location))
               .join(", ")}
           />
 
           {/* Date found */}
           <InfoTag
-            icon={<IconCalendar size={18} stroke={1.5} />}
+            icon={<IconCalendar size={16} stroke={1.5} />}
             text={`Found ${getTimeAgo(job.created_at)}`}
           />
 
           {/* Role type */}
           {job.type && (
             <InfoTag
-              icon={<IconBriefcase size={18} stroke={1.5} />}
+              icon={<IconBriefcase size={16} stroke={1.5} />}
               text={`${formatCapString(job.type)} Role`}
             />
           )}
 
           {/* Industry field */}
           {job.industry_field && (
             <InfoTag
-              icon={<IconBuilding size={18} stroke={1.5} />}
+              icon={<IconBuilding size={16} stroke={1.5} />}
               text={formatCapString(job.industry_field)}
             />
           )}
 
           {/* Working Rights */}
           {job.working_rights && (
             <InfoTag
-              icon={<IconId size={18} stroke={1.5} />}
+              icon={<IconId size={16} stroke={1.5} />}
               text={formatWorkingRights(job.working_rights)}
             />
           )}
@@ -79,6 +79,7 @@ export default function JobHeader({ job }: JobHeaderProps) {
       {/* Company logo with responsive sizing */}
       <CompanyLogo
         name={job.company.name}
+        applicationUrl={job.application_url}
         logo={job.company.logo}
         className="aspect-square h-12 w-12 lg:h-16 lg:w-16"
       />

frontend/src/components/jobs/job-list.tsx

@@ -9,10 +9,12 @@ import { Modal, ScrollArea } from "@mantine/core";
 import JobDetails from "@/components/jobs/job-details";
 import JobListLoading from "@/components/layout/job-list-loading";
 import JobPagination from "@/components/jobs/job-pagination";
+import { useMediaQuery } from "@mantine/hooks";
 
 export default function JobList({ jobs }: { jobs: Job[] }) {
   const { selectedJob, setSelectedJob, isLoading } = useFilterContext();
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
 
   useEffect(() => {
     // Effect to set initial selection when jobs change and no job is selected
@@ -25,10 +27,19 @@ export default function JobList({ jobs }: { jobs: Job[] }) {
 
   return (
     <>
+      {/* This is a workaround to ensure mobile job cards are unaffected by the scrollbar. */}
       <ScrollArea
-        offsetScrollbars
-        className={"h-[calc(100svh-150px)] lg:h-[calc(100svh-180px)]"}
+        className={"h-[calc(100svh-140px)] lg:h-[calc(100svh-180px)]"}
         type="auto"
+        scrollbarSize={isDesktop ? undefined : 2}
+        offsetScrollbars={isDesktop}
+        classNames={
+          isDesktop
+            ? {
+                scrollbar: "absolute right-[-2px] lg:right-0",
+              }
+            : undefined
+        }
       >
         <div className="space-y-4 pr-1">
           {jobs.map((job) => (

frontend/src/components/jobs/job-summary.tsx

@@ -0,0 +1,21 @@
+// frontend/src/components/jobs/details/sections/job-description.tsx
+import SectionHeading from "@/components/ui/section-heading";
+import { IconRobot } from "@tabler/icons-react";
+
+interface JobSummaryProps {
+  one_liner?: string;
+}
+
+export default function JobSummary({ one_liner }: JobSummaryProps) {
+  return (
+    <div className="flex flex-col mt-4">
+      <SectionHeading
+        icon={<IconRobot size={16} stroke={1.5} />}
+        title="Summary"
+      />
+      <span className={"prose prose-invert lg:ml-6 leading-relaxed text-xs"}>
+        {one_liner}
+      </span>
+    </div>
+  );
+}

frontend/src/components/layout/job-list-loading.tsx

@@ -3,7 +3,7 @@ import { ScrollArea } from "@mantine/core";
 export default function JobListLoading() {
   return (
     <ScrollArea
-      className="h-[calc(100svh-150px)] lg:h-[calc(100svh-180px)]"
+      className="h-[calc(100svh-140px)] lg:h-[calc(100svh-180px)]"
       type="never"
       offsetScrollbars
     >