Responsive Web Design Fixes: Dataset page

components/resource/About.tsx

@@ -38,7 +38,7 @@ const About: React.FC<{ variables: any }> = ({ variables }) => {
   return (
     <>
       <div className="flex flex-col mb-10">
-        <div className="flex xl:flex-row flex-col mb-4 text-[#4D4D4D] font-avenir font-extrabold text-[36px] items-baseline">
+        <div className="flex xl:flex-row flex-col mb-4 text-[#4D4D4D] font-avenir font-extrabold  text-2xl lg:text-[36px] lg:leading-[56px] items-baseline">
           {resource.format === 'CSV' ? (
             <img
               src="/images/csv-icon.svg"

components/resource/NavBreadCrumbs.tsx

@@ -6,10 +6,10 @@ export default function NavBreadCrumbs({ navInfo }) {
   return (
     <div className=" mt--2 mb-8 font-avenir">
       <div className="flex flex-1 bg-[#F7FAFC] bg-waves pl-2">
-        <ol className="flex text-[13px] items-center font-[500] tracking-widest uppercase text-[#464646] px-12 py-8 space-x-2">
+        <ol className="hoverable-scroll overflow-auto flex text-[13px] items-center font-[500] md:tracking-widest uppercase text-[#464646] px-5 lg:px-12 py-8 space-x-2">
           <li>
             <Link href="/search">
-              <a className="group relative">
+              <a className="group relative whitespace-nowrap">
                 {t('datasets')}
                 <span
                   className={`hidden lg:opacity-0 lg:flex absolute left-1 right-1 -bottom-2.5 h-0.5 ease-in-out duration-300
@@ -23,7 +23,7 @@ export default function NavBreadCrumbs({ navInfo }) {
           </li>
           <li>
             <Link href={`/@${navInfo.orgName}`}>
-              <a className="group relative">
+              <a className="group relative whitespace-nowrap">
                 {navInfo.orgTitle}
                 <span
                   className={`hidden lg:opacity-0 lg:flex absolute left-1 right-1 -bottom-2.5 h-0.5 ease-in-out duration-300
@@ -37,7 +37,7 @@ export default function NavBreadCrumbs({ navInfo }) {
           </li>
           <li>
             <Link href={`/@${navInfo.orgName}/${navInfo.datasetName}`}>
-              <a className="group relative">
+              <a className="group relative whitespace-nowrap">
                 {navInfo.datasetTitle}
                 <span
                   className={`hidden lg:opacity-0 lg:flex absolute left-1 right-1 -bottom-2.5 h-0.5 ease-in-out duration-300
@@ -49,7 +49,7 @@ export default function NavBreadCrumbs({ navInfo }) {
           <li>
             <span>&gt;</span>
           </li>
-          <li>{navInfo.resourceTitle}</li>
+          <li className="whitespace-nowrap">{navInfo.resourceTitle}</li>
         </ol>
       </div>
     </div>

components/resource/ResourceExplorer.tsx

@@ -109,7 +109,7 @@ const DataExplorer: React.FC<{ dataset: any; columnHeaderStyle: any }> = ({
   return (
     <div className="grid xl:grid-cols-12 grid-cols-1 pl-0 w-full">
       {/* Preview: show Data Explorer if tabular data + datastore active */}
-      <div className="col-span-12 p-10 bg-[#F7FAFC] rounded-2xl">
+      <div className="col-span-12 p-5 md:p-10 bg-[#F7FAFC] rounded-2xl">
         <div className="flex xl:flex-row flex-col justify-between mb-4">
           <div className="flex font-avenir text-[20px] text-[#808080] font-normal pl-4 w-2/3 xl:flex-row flex-col">
             <div className="flex xl:mr-3 items-baseline mb-2">

components/search/FiltersBar.tsx

@@ -261,11 +261,11 @@ export default function FiltersBar({
   sideFilter.organization.forEach((el) => fixTranslations(el));
 
   return (
-    <div className="">
+    <div className="w-full">
       {filters === t('topics') && (
         <>
-          <div className="w-100 max-w-6xl bg-white">
-            <div id="topics">
+          <div className="">
+            <div id="topics" className="mx-5 bg-white rounded-xl py-2">
               <TopicsCarousel
                 items={topics}
                 active={{ name: null }}
@@ -276,7 +276,7 @@ export default function FiltersBar({
             </div>
           </div>
 
-          <div className="w-100 max-w-6xl mt-2">
+          <div className="w-100 max-w-6xl mt-2 mx-auto px-5">
             <div className="relative">
               <div className="peer">
                 <FilterCarousel identifier="sub-topics-carousel">
@@ -336,7 +336,7 @@ export default function FiltersBar({
         </>
       )}
       {filters === t('organization') && (
-        <div className="w-100 max-w-6xl mt-2">
+        <div className="w-100 lg:max-w-6xl mx-5 mt-2">
           <div className="relative">
             <div className="peer">
               <FilterCarousel identifier="orgs-carousel">
@@ -392,26 +392,28 @@ export default function FiltersBar({
       )}
 
       {filters === t('ds-bt-time') && (
-        <div className="w-full can mt-2 bg-white">
-          {Object.keys(timeFrames).map((timeframe, index) => (
-            <button
-              key={index}
-              className={`py-2 px-4 rounded-xl font-avenir ${
-                currentTimeIndex === index
-                  ? 'bg-button-gradient text-white'
-                  : 'text-black'
-              }`}
-              onClick={() => setTimeSearchValue(timeframe, index)}
-            >
-              {timeframe}
-            </button>
-          ))}
+        <div className="min-w-full px-5">
+          <div className="w-full rounded-xl mt-2 can mt-2 bg-white flex flex-col sm:flex-row">
+            {Object.keys(timeFrames).map((timeframe, index) => (
+              <button
+                key={index}
+                className={`py-2 px-4 rounded-xl font-avenir ${
+                  currentTimeIndex === index
+                    ? 'bg-button-gradient text-white'
+                    : 'text-black'
+                }`}
+                onClick={() => setTimeSearchValue(timeframe, index)}
+              >
+                {timeframe}
+              </button>
+            ))}
+          </div>
         </div>
       )}
 
       {currentTimeIndex === 0 && filters === t('ds-bt-time') && (
-        <div className="w-full mt-4">
-          <div className="flex flex-col w-1/2  pt-6 px-8 font-[Raleway] bg-white relative rounded-xl triangle">
+        <div className="w-full mt-4 px-5">
+          <div className="flex flex-col w-full lg:w-1/2  pt-6 px-8 font-[Raleway] bg-white relative rounded-xl triangle">
             <div>
               <MultiRangeSlider
                 min={0}
@@ -456,7 +458,7 @@ export default function FiltersBar({
       )}
       {(sideFilter.groups.length > 0 ||
         sideFilter.organization.length > 0) && (
-        <div className="flex flex-col">
+        <div className="flex flex-col mx-5 mt-5">
           <span className="font-bold">{t('active-filters')}</span>
           {sideFilter.groups.length > 0 && (
             <div className="flex w-100 max-w-6xl items-between">

components/search/NewForm.tsx

@@ -54,7 +54,7 @@ const SearchForm: React.FC<{
       <h1 className="text-3xl text-center font-extrabold !mt-0 mb-8 capitalize z-10">
         {t('ds-h-sear')}
       </h1>
-      <div className="xl:flex xl:flex-wrap items-center w-full sm:max-w-xl xl:max-w-none xl:w-9/12 px-4 sm:px-0 space-x-4 space-y-2 xl:space-y-0 2xl:max-w-7xl z-10">
+      <div className="xl:flex xl:flex-wrap items-center w-full sm:max-w-3xl xl:max-w-none xl:w-9/12 px-4 space-x-4 space-y-2 xl:space-y-0 2xl:max-w-7xl z-10">
         <form
           className="flex flex-1 relative xl:w-1/2 bg-white rounded-xl px-4 py-2 items-center"
           onSubmit={(e) => e.preventDefault()}
@@ -77,7 +77,7 @@ const SearchForm: React.FC<{
         <p className="text-lg text-center xl:text-left bg-button-gradient bg-clip-text text-transparent">
           {t('ds-p-filt')}
         </p>
-        <div className="flex flex-wrap xl:flex-nowrap justify-start sm:justify-center xl:justify-between bg-white w-full sm:w-fit !mx-auto xl:!ml-4 p-2 h-[56px] rounded-xl overflow-auto scrollbar-invisible">
+        <div className="flex w-auto flex-wrap xl:flex-nowrap justify-start sm:justify-center xl:justify-between bg-white w-full  !mx-auto xl:!ml-4 p-2 h-[56px] rounded-xl overflow-auto scrollbar-invisible">
           <div className="flex text-sm">
             <div
               className={`flex space-x-1 ${
@@ -129,7 +129,7 @@ const SearchForm: React.FC<{
           </div>
         </div>
       </div>
-      <div className="mt-4 z-10">
+      <div className="mt-4 z-10 w-full sm:max-w-3xl xl:max-w-none xl:w-9/12  mx-auto">
         <FiltersBar
           qvariables={variables}
           setQvariables={setQvariables}

components/search/filters/FilterCarousel.tsx

@@ -22,8 +22,8 @@ const FilterCarousel: React.FC<{ identifier: string }> = ({
         onSwiper={(instance) => setSwiper(instance)}
         breakpoints={{
           1: {
-            slidesPerView: 3,
-            slidesPerGroup: 3,
+            slidesPerView: 2,
+            slidesPerGroup: 2,
           },
           460: {
             slidesPerView: 3,

components/search/filters/TopicFilterCarousel.tsx

@@ -34,16 +34,16 @@ const TopicFilterCarousel: React.FC<CarouselProps> = ({
 
   return (
     <>
-      <div className="relative group">
+      <div className="relative group w-full">
         <div
-          className={`transition-all opacity-0 group-hover:opacity-100 absolute hidden lg:block top-[50%] -translate-y-2/4 ml-[-1.5rem] md:left-0 z-50 nav-prev-button${
+          className={`transition-all opacity-1 md:opacity-0 md:group-hover:opacity-100 absolute  top-[50%] -translate-y-2/4 ml-[-1.5rem] left-[30px] z-50 nav-prev-button${
             identifier ? '--' + identifier : ''
           }`}
         >
           <NavButton size="small" orientation="left" />
         </div>
         <div
-          className={`transition-all opacity-0 group-hover:opacity-100  absolute hidden lg:block top-[50%] -translate-y-2/4 mr-[-1.5rem] md:right-0 z-50 nav-next-button${
+          className={`transition-all  opacity-1 md:opacity-0 md:group-hover:opacity-100 absolute  top-[50%] -translate-y-2/4 mr-[-1.5rem] right-[30px] z-50 nav-next-button${
             identifier ? '--' + identifier : ''
           }`}
         >
@@ -55,25 +55,21 @@ const TopicFilterCarousel: React.FC<CarouselProps> = ({
           onSwiper={(instance) => setSwiper(instance)}
           breakpoints={{
             1: {
+              slidesPerView: 1,
+              slidesPerGroup: 1,
+            },
+            460: {
               slidesPerView: 2,
               slidesPerGroup: 2,
             },
-            460: {
+            720: {
               slidesPerView: 3,
               slidesPerGroup: 3,
             },
-            720: {
-              slidesPerView: 5,
-              slidesPerGroup: 5,
-            },
             1200: {
               slidesPerView: 5,
               slidesPerGroup: 5,
             },
-            1280: {
-              slidesPerView: 6,
-              slidesPerGroup: 6,
-            },
           }}
           initialSlide={items.findIndex((item) => item.name == active.name)}
           navigation={{
@@ -82,8 +78,9 @@ const TopicFilterCarousel: React.FC<CarouselProps> = ({
           }}
         >
           {items.map((item, index) => (
-            <SwiperSlide key={index}>
+            <SwiperSlide key={index} className="text-center">
               <button
+                className="text-ellipsis overflow-hidden ..."
                 onClick={(e) => {
                   const slidesPerView = swiper.params.slidesPerView;
                   const currentSlide = index; //  or swiper.clickedIndex

pages/[org]/[dataset]/r/[resource]/index.tsx

@@ -59,7 +59,7 @@ const Resource: React.FC<{ variables: any }> = ({ variables }) => {
           orgTitle: result.organization.title,
         }}
       />
-      <main className="flex flex-wrap pl-12 pr-20 mb-70">
+      <main className={`flex flex-wrap mb-70 px-5 lg:px-12 lg:mr-10`}>
         <ScrollIndicator
           firstImage={{
             url: '/images/scroll_indicator_icon_1.svg',
@@ -77,7 +77,7 @@ const Resource: React.FC<{ variables: any }> = ({ variables }) => {
           ]}
         />
         {/* Dataset About section */}
-        <div id="about">
+        <div id="about" className="w-full">
           <About variables={variables} />
         </div>
         {/* Resource display */}

pages/search.tsx

@@ -78,7 +78,7 @@ const Search: React.FC<Props> = ({ variables }) => {
           }}
         />
         <div className="container mx-auto">
-          <div className="mb-12 mx-10 md:mx-16 lg:mx-28 mt-12">
+          <div className="mb-12 mx-5 md:mx-16 lg:mx-28 mt-12">
             <div className="px-4">
               <h1 className="font-semibold text-xl sm:text-2xl">
                 {amount}{' '}

styles/globals.css

@@ -332,7 +332,7 @@ div.MuiDataGrid-filterFormDeleteIcon {
 .triangle:before {
   content: '';
   position: absolute;
-  left: 10px;
+  left: 30px;
   bottom: 100%;
   margin: 0 auto;
   width: 0;