From 01dbaa9dc56a941ded406c5086e0b9944f590ebb Mon Sep 17 00:00:00 2001
From: Mayank Rana <mayankranax1@gmail.com>
Date: Thu, 12 Oct 2023 15:32:37 +0530
Subject: [PATCH 1/5] Update landing page component UI

---
 .../src/components/landingPage/index.tsx      | 43 ++++++++++---------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/packages/design-system/src/components/landingPage/index.tsx b/packages/design-system/src/components/landingPage/index.tsx
index 7d5cb6bb4..fa66827e2 100644
--- a/packages/design-system/src/components/landingPage/index.tsx
+++ b/packages/design-system/src/components/landingPage/index.tsx
@@ -71,34 +71,35 @@ const LandingPage = ({ title, children, isLoading }: LandingPageProps) => {
     <>
       {isLoading && <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />}
       <div className={classNames(isLoading && 'hidden')}>
-        <div className="px-4 pt-6 pb-3 border-b border-hex-gray dark:border-quartz">
-          <button
-            className="flex gap-2 text-2xl font-bold items-baseline dark:text-bright-gray"
-            onClick={() => setOpen((prevOpen) => !prevOpen)}
-          >
-            {title && <h1 className="text-left">{title}</h1>}
-            <ArrowUp
-              className={classNames(!open && 'rotate-180 -translate-y-1')}
-            />
-          </button>
-        </div>
+        <div className="flex flex-col">
+          <div className="p-4 border-b border-hex-gray dark:border-quartz">
+            <button
+              className="flex gap-2 text-2xl font-bold items-baseline dark:text-bright-gray"
+              onClick={() => setOpen((prevOpen) => !prevOpen)}
+            >
+              {title && <h1 className="text-left">{title}</h1>}
+              <ArrowUp
+                className={classNames(open && 'rotate-180 -translate-y-1')}
+              />
+            </button>
+          </div>
 
-        {/* Section Content */}
-        <div
-          className={classNames(
-            !open && 'hidden',
-            'border-b border-hex-gray dark:border-quartz'
-          )}
-        >
-          {children}
+          {/* Section Content */}
+          <div
+            className={classNames(
+              !open && 'hidden',
+              'border-b border-hex-gray dark:border-quartz h-full'
+            )}
+          >
+            {children}
+          </div>
         </div>
 
-        <div className="md:max-w-[70%] flex flex-col md:flex-row px-4 pt-12 pb-24 gap-10">
+        <div className="flex flex-col md:flex-row px-4 pt-12 pb-24 gap-10">
           {/* Quick Links */}
           <div className="md:w-[35%] flex flex-col gap-4">
             <BulletList rows={QUICK_LINKS} heading="Quick Links" />
           </div>
-
           {/* Latest News */}
           <div className="md:w-[65%] flex flex-col gap-4">
             <h2 className="text-xs font-bold uppercase text-darkest-gray dark:text-bright-gray">

From 949415d5c248fd50e896f1748b6d4af5cd5e3c71 Mon Sep 17 00:00:00 2001
From: Mayank Rana <mayankranax1@gmail.com>
Date: Thu, 12 Oct 2023 15:33:13 +0530
Subject: [PATCH 2/5] Update table UI

---
 packages/design-system/src/components/cookieTable/index.tsx     | 2 +-
 packages/design-system/src/components/table/table.tsx           | 2 +-
 .../src/components/table/tableHeader/headerCell.tsx             | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/design-system/src/components/cookieTable/index.tsx b/packages/design-system/src/components/cookieTable/index.tsx
index 77a988aa5..291c1d443 100644
--- a/packages/design-system/src/components/cookieTable/index.tsx
+++ b/packages/design-system/src/components/cookieTable/index.tsx
@@ -118,7 +118,7 @@ const CookieTable = ({
   }, []);
 
   return (
-    <div className="flex-1 w-full h-full text-outer-space-crayola border-x border-american-silver dark:border-quartz">
+    <div className="flex-1 w-full h-full overflow-x-auto text-outer-space-crayola border-x border-american-silver dark:border-quartz">
       <Table
         updatePreference={updatePreference}
         table={table}
diff --git a/packages/design-system/src/components/table/table.tsx b/packages/design-system/src/components/table/table.tsx
index f01330eec..0df0ff91e 100644
--- a/packages/design-system/src/components/table/table.tsx
+++ b/packages/design-system/src/components/table/table.tsx
@@ -100,7 +100,7 @@ const Table = ({
         onClose={setShowColumnsMenu}
         position={columnPosition}
       />
-      <div className="h-full w-full overflow-auto min-w-[40rem]" ref={tableRef}>
+      <div className="h-full w-full overflow-auto min-w-[70rem]" ref={tableRef}>
         <TableHeader
           updatePreference={updatePreference}
           table={table}
diff --git a/packages/design-system/src/components/table/tableHeader/headerCell.tsx b/packages/design-system/src/components/table/tableHeader/headerCell.tsx
index eb954312a..c43a7defe 100644
--- a/packages/design-system/src/components/table/tableHeader/headerCell.tsx
+++ b/packages/design-system/src/components/table/tableHeader/headerCell.tsx
@@ -91,6 +91,7 @@ const HeaderCell = ({
       <div
         className="w-full h-full flex items-center justify-between text-cool-grey dark:text-bright-gray"
         onClick={() => setIsRowFocused(false)}
+        title={cell.header}
       >
         <p className="px-1 py-px truncate text-xs">{cell.header}</p>
         <p className="mr-2 scale-125">

From 0079867000342c10eb91f2e03b4f379af256d5b7 Mon Sep 17 00:00:00 2001
From: Mayank Rana <mayankranax1@gmail.com>
Date: Thu, 12 Oct 2023 15:33:38 +0530
Subject: [PATCH 3/5] Update landing page children

---
 .../components/antiCovertTracking/antiCovertTracking.tsx      | 4 ++--
 .../components/antiCovertTracking/bounceTracking/index.tsx    | 2 +-
 .../components/antiCovertTracking/fingerprinting/index.tsx    | 2 +-
 .../src/view/devtools/components/privacySandbox/index.tsx     | 4 ++--
 .../components/privateAdvertising/attribution/index.tsx       | 2 +-
 .../components/privateAdvertising/privateAdvertising.tsx      | 4 ++--
 .../devtools/components/privateAdvertising/topics/index.tsx   | 2 +-
 .../components/privateAdvertising/topics/topicsList.tsx       | 4 ++--
 .../view/devtools/components/siteBoundaries/chips/index.tsx   | 2 +-
 .../components/siteBoundaries/relatedWebsiteSets/index.tsx    | 2 +-
 .../devtools/components/siteBoundaries/siteBoundaries.tsx     | 4 ++--
 11 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/extension/src/view/devtools/components/antiCovertTracking/antiCovertTracking.tsx b/packages/extension/src/view/devtools/components/antiCovertTracking/antiCovertTracking.tsx
index 3d5ac5213..a531088f8 100644
--- a/packages/extension/src/view/devtools/components/antiCovertTracking/antiCovertTracking.tsx
+++ b/packages/extension/src/view/devtools/components/antiCovertTracking/antiCovertTracking.tsx
@@ -30,14 +30,14 @@ const AntiCovertTracking = () => {
   return (
     <>
       <LandingPage title="Tracking Protection" isLoading={loading}>
-        <div className="px-4 pt-6 pb-4 h-screen w-full">
+        <div className="px-4 pt-6 pb-4 h-[82vh] w-full">
           <iframe
             src="https://privacysandbox.info/en/privacy-sandbox/prevent-covert-tracking"
             height="100%"
             onLoad={() => {
               setLoading(false);
             }}
-            className="w-full md:w-[70%]"
+            className="w-full md:m-auto md:w-[70%]"
           />
         </div>
       </LandingPage>
diff --git a/packages/extension/src/view/devtools/components/antiCovertTracking/bounceTracking/index.tsx b/packages/extension/src/view/devtools/components/antiCovertTracking/bounceTracking/index.tsx
index aa30c2b33..9bb8540b4 100644
--- a/packages/extension/src/view/devtools/components/antiCovertTracking/bounceTracking/index.tsx
+++ b/packages/extension/src/view/devtools/components/antiCovertTracking/bounceTracking/index.tsx
@@ -31,7 +31,7 @@ const BounceTracking = () => {
   return (
     <LandingPage title={pageTitle} isLoading={!pageTitle}>
       <div
-        className="px-4 max-w-2xl h-full overflow-auto"
+        className="px-4 max-w-2xl h-fit overflow-auto"
         data-testid="bounce-tracking-content"
       >
         <InfoCard infoKey={PSInfoKey.BounceTracking} setTitle={setPageTitle} />
diff --git a/packages/extension/src/view/devtools/components/antiCovertTracking/fingerprinting/index.tsx b/packages/extension/src/view/devtools/components/antiCovertTracking/fingerprinting/index.tsx
index 6045297d2..b147aa465 100644
--- a/packages/extension/src/view/devtools/components/antiCovertTracking/fingerprinting/index.tsx
+++ b/packages/extension/src/view/devtools/components/antiCovertTracking/fingerprinting/index.tsx
@@ -31,7 +31,7 @@ const Fingerprinting = () => {
   return (
     <LandingPage title={pageTitle} isLoading={!pageTitle}>
       <div
-        className="px-4 max-w-2xl h-full overflow-auto"
+        className="px-4 max-w-2xl h-fit overflow-auto"
         data-testid="fingerprinting-content"
       >
         <InfoCard
diff --git a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx
index 58c73e864..63a624a15 100644
--- a/packages/extension/src/view/devtools/components/privacySandbox/index.tsx
+++ b/packages/extension/src/view/devtools/components/privacySandbox/index.tsx
@@ -29,7 +29,7 @@ const PrivacySandbox = () => {
   return (
     <>
       <LandingPage title="Privacy Sandbox" isLoading={loading}>
-        <div className="px-4 pt-6 pb-4 h-screen w-full">
+        <div className="px-4 pt-6 pb-4 h-[82vh] w-full">
           <iframe
             src="https://privacysandbox.com"
             data-testid="privacy-sandbox-content"
@@ -37,7 +37,7 @@ const PrivacySandbox = () => {
             onLoad={() => {
               setLoading(false);
             }}
-            className="w-full md:w-[70%] border rounded-xl border-hex-gray dark:border-quartz"
+            className="w-full md:w-[70%] md:m-auto border rounded-xl border-hex-gray dark:border-quartz"
           />
         </div>
       </LandingPage>
diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/attribution/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/attribution/index.tsx
index 19ff2c5d5..86787d768 100644
--- a/packages/extension/src/view/devtools/components/privateAdvertising/attribution/index.tsx
+++ b/packages/extension/src/view/devtools/components/privateAdvertising/attribution/index.tsx
@@ -31,7 +31,7 @@ const Attribution = () => {
   return (
     <LandingPage title={pageTitle} isLoading={!pageTitle}>
       <div
-        className="px-4 max-w-2xl h-full overflow-auto"
+        className="px-4 max-w-2xl h-fit overflow-auto"
         data-testid="attribution-content"
       >
         <InfoCard
diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/privateAdvertising.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/privateAdvertising.tsx
index d4f26170f..353503748 100644
--- a/packages/extension/src/view/devtools/components/privateAdvertising/privateAdvertising.tsx
+++ b/packages/extension/src/view/devtools/components/privateAdvertising/privateAdvertising.tsx
@@ -30,14 +30,14 @@ const PrivateAdvertising = () => {
   return (
     <>
       <LandingPage title="Private Advertising" isLoading={loading}>
-        <div className="px-4 pt-6 pb-4 h-screen w-full">
+        <div className="px-4 pt-6 pb-4 h-[82vh] w-full">
           <iframe
             src="https://privacysandbox.info/en/privacy-sandbox/measure-digital-ads"
             height="100%"
             onLoad={() => {
               setLoading(false);
             }}
-            className="w-full md:w-[70%]"
+            className="w-full md:m-auto md:w-[70%] bg-red-500"
           />
         </div>
       </LandingPage>
diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/topics/index.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/topics/index.tsx
index 4ae0728b2..008c9fe28 100644
--- a/packages/extension/src/view/devtools/components/privateAdvertising/topics/index.tsx
+++ b/packages/extension/src/view/devtools/components/privateAdvertising/topics/index.tsx
@@ -32,7 +32,7 @@ const Topics = () => {
   return (
     <LandingPage title={pageTitle} isLoading={!pageTitle}>
       <div
-        className="px-4 max-w-2xl h-full overflow-auto"
+        className="px-4 max-w-2xl h-fit overflow-auto"
         data-testid="topics-content"
       >
         <InfoCard infoKey={PSInfoKey.Topics} setTitle={setPageTitle} />
diff --git a/packages/extension/src/view/devtools/components/privateAdvertising/topics/topicsList.tsx b/packages/extension/src/view/devtools/components/privateAdvertising/topics/topicsList.tsx
index 40b7cd0ac..c697fccda 100644
--- a/packages/extension/src/view/devtools/components/privateAdvertising/topics/topicsList.tsx
+++ b/packages/extension/src/view/devtools/components/privateAdvertising/topics/topicsList.tsx
@@ -40,8 +40,8 @@ const TopicsList = () => {
   }, []);
 
   return (
-    <div className="max-w-2xl m-3 border-t border-american-silver">
-      <div className="p-6 pl-0 dark:bg-davys-grey ">
+    <div className="max-w-2xl m-3 border-t border-american-silver dark:border-quartz">
+      <div className="p-6 pl-0">
         <h5 className="mb-2 text-xl font-bold tracking-tight text-gray-900 dark:text-bright-gray">
           Topics List
         </h5>
diff --git a/packages/extension/src/view/devtools/components/siteBoundaries/chips/index.tsx b/packages/extension/src/view/devtools/components/siteBoundaries/chips/index.tsx
index 8f726808f..595f164f0 100644
--- a/packages/extension/src/view/devtools/components/siteBoundaries/chips/index.tsx
+++ b/packages/extension/src/view/devtools/components/siteBoundaries/chips/index.tsx
@@ -31,7 +31,7 @@ const Chips = () => {
   return (
     <LandingPage title={pageTitle} isLoading={!pageTitle}>
       <div
-        className="px-4 max-w-2xl h-full overflow-auto"
+        className="px-4 max-w-2xl h-fit overflow-auto"
         data-testid="chips-content"
       >
         <InfoCard infoKey={PSInfoKey.Chips} setTitle={setPageTitle} />
diff --git a/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/index.tsx b/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/index.tsx
index a9c80d446..c3c1dea3b 100644
--- a/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/index.tsx
+++ b/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/index.tsx
@@ -34,7 +34,7 @@ const RelatedWebsiteSets = () => {
   return (
     <LandingPage title={pageTitle} isLoading={!pageTitle}>
       <div
-        className="px-4 max-w-2xl h-full overflow-auto divide-y divide-gray-200 dark:divide-gray-500"
+        className="px-4 max-w-2xl h-fit overflow-auto divide-y divide-american-silver dark:divide-quartz"
         data-testid="related-website-sets-content"
       >
         <InfoCard
diff --git a/packages/extension/src/view/devtools/components/siteBoundaries/siteBoundaries.tsx b/packages/extension/src/view/devtools/components/siteBoundaries/siteBoundaries.tsx
index 81e5b7c3d..cc85629ee 100644
--- a/packages/extension/src/view/devtools/components/siteBoundaries/siteBoundaries.tsx
+++ b/packages/extension/src/view/devtools/components/siteBoundaries/siteBoundaries.tsx
@@ -29,14 +29,14 @@ const SiteBoundaries = () => {
   return (
     <>
       <LandingPage title="Site Boundaries" isLoading={loading}>
-        <div className="px-4 pt-6 pb-4 h-screen w-full">
+        <div className="px-4 pt-6 pb-4 h-[82vh] w-full">
           <iframe
             src="https://privacysandbox.info/en/privacy-sandbox/strengthen-privacy-boundaries"
             height="100%"
             onLoad={() => {
               setLoading(false);
             }}
-            className="w-full md:w-[70%]"
+            className="w-full md:m-auto md:w-[70%]"
           />
         </div>
       </LandingPage>

From a56061de6c0ff3b13f50e2954dd7da51a7ee4c85 Mon Sep 17 00:00:00 2001
From: Mayank Rana <mayankranax1@gmail.com>
Date: Mon, 16 Oct 2023 12:30:35 +0530
Subject: [PATCH 4/5] UI changes

---
 .../src/components/bulletList/listRow.tsx      |  1 +
 .../src/components/landingPage/index.tsx       | 10 ++++++----
 .../relatedWebsiteSets/index.tsx               | 18 +++++++++++-------
 .../relatedWebsiteSets/jsonGenerator/index.tsx |  2 +-
 4 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/packages/design-system/src/components/bulletList/listRow.tsx b/packages/design-system/src/components/bulletList/listRow.tsx
index 40c140bb0..cdf8115bc 100644
--- a/packages/design-system/src/components/bulletList/listRow.tsx
+++ b/packages/design-system/src/components/bulletList/listRow.tsx
@@ -36,6 +36,7 @@ const ListRow = ({ row }: Props) => {
       </span>
       {row?.link ? (
         <a
+          title={row.link}
           href={row.link}
           target="_blank"
           rel="noreferrer"
diff --git a/packages/design-system/src/components/landingPage/index.tsx b/packages/design-system/src/components/landingPage/index.tsx
index fa66827e2..e86afbf21 100644
--- a/packages/design-system/src/components/landingPage/index.tsx
+++ b/packages/design-system/src/components/landingPage/index.tsx
@@ -74,13 +74,15 @@ const LandingPage = ({ title, children, isLoading }: LandingPageProps) => {
         <div className="flex flex-col">
           <div className="p-4 border-b border-hex-gray dark:border-quartz">
             <button
-              className="flex gap-2 text-2xl font-bold items-baseline dark:text-bright-gray"
+              className="flex gap-2 text-2xl font-bold items-baseline dark:text-bright-gray cursor-pointer"
               onClick={() => setOpen((prevOpen) => !prevOpen)}
             >
               {title && <h1 className="text-left">{title}</h1>}
-              <ArrowUp
-                className={classNames(open && 'rotate-180 -translate-y-1')}
-              />
+              <div>
+                <ArrowUp
+                  className={classNames(open && 'rotate-180 -translate-y-1')}
+                />
+              </div>
             </button>
           </div>
 
diff --git a/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/index.tsx b/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/index.tsx
index c3c1dea3b..7f5c6edc4 100644
--- a/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/index.tsx
+++ b/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/index.tsx
@@ -34,18 +34,22 @@ const RelatedWebsiteSets = () => {
   return (
     <LandingPage title={pageTitle} isLoading={!pageTitle}>
       <div
-        className="px-4 max-w-2xl h-fit overflow-auto divide-y divide-american-silver dark:divide-quartz"
+        className="max-w-2xl h-fit overflow-auto divide-y divide-american-silver dark:divide-quartz"
         data-testid="related-website-sets-content"
       >
-        <InfoCard
-          infoKey={PSInfoKey.RelatedWebsiteSets}
-          setTitle={setPageTitle}
-        />
+        <div className="px-4">
+          <InfoCard
+            infoKey={PSInfoKey.RelatedWebsiteSets}
+            setTitle={setPageTitle}
+          />
+        </div>
         <div className="py-6 text-raisin-black dark:text-bright-gray flex flex-col gap-3">
-          <Insights />
+          <div className="px-4">
+            <Insights />
+          </div>
           <RWSJsonGenerator open={showForm} setOpen={setShowForm} />
           {!showForm && (
-            <div className="pt-4">
+            <div className="pt-4 px-4">
               <Button
                 text="Generate RWS JSON Resources"
                 onClick={() => setShowForm(true)}
diff --git a/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/jsonGenerator/index.tsx b/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/jsonGenerator/index.tsx
index f389384d6..ab279bc8e 100644
--- a/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/jsonGenerator/index.tsx
+++ b/packages/extension/src/view/devtools/components/siteBoundaries/relatedWebsiteSets/jsonGenerator/index.tsx
@@ -83,7 +83,7 @@ const RWSJsonGenerator = ({ open, setOpen }: RWSJsonGeneratorProps) => {
   return (
     <>
       {open && (
-        <div className="overflow-auto" ref={formContainer}>
+        <div className="overflow-auto px-4" ref={formContainer}>
           <div className="text-raisin-black dark:text-bright-gray w-full min-w-[33rem]">
             <h1 className="text-lg font-semibold mt-4">
               Related Website Sets JSON Generator

From 6839ebc8acce3099a5d0acd46df68dab35597c95 Mon Sep 17 00:00:00 2001
From: Mayank Rana <mayankranax1@gmail.com>
Date: Mon, 16 Oct 2023 13:53:47 +0530
Subject: [PATCH 5/5] Update padding

---
 packages/design-system/src/components/landingPage/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/landingPage/index.tsx b/packages/design-system/src/components/landingPage/index.tsx
index e86afbf21..51e9f7fe9 100644
--- a/packages/design-system/src/components/landingPage/index.tsx
+++ b/packages/design-system/src/components/landingPage/index.tsx
@@ -97,7 +97,7 @@ const LandingPage = ({ title, children, isLoading }: LandingPageProps) => {
           </div>
         </div>
 
-        <div className="flex flex-col md:flex-row px-4 pt-12 pb-24 gap-10">
+        <div className="flex flex-col md:flex-row px-4 pt-6 pb-24 gap-10">
           {/* Quick Links */}
           <div className="md:w-[35%] flex flex-col gap-4">
             <BulletList rows={QUICK_LINKS} heading="Quick Links" />