chore: move pagination cursor title in a separate div

The progress bar will be clearer for everyone if the information about
the number of loaded articles is printed without hovering the progress
bar.

4 files changed, 28 insertions, 11 deletions

diff --git a/src/components/Buttons/Button/Button.tsx b/src/components/Buttons/Button/Button.tsx
index 86e0e5b..ada23fe 100644
--- a/src/components/Buttons/Button/Button.tsx
+++ b/src/components/Buttons/Button/Button.tsx
@@ -7,15 +7,18 @@ const Button = ({
   clickHandler,
   kind = 'secondary',
   position = 'left',
+  spacing = false,
   isDisabled = false,
 }: {
   children: ReactNode;
   clickHandler: any;
   kind?: ButtonKind;
   position?: ButtonPosition;
+  spacing?: boolean;
   isDisabled?: boolean;
 }) => {
-  const classes = `${styles.btn} ${styles[position]} ${styles[kind]}`;
+  const spacingClass = spacing ? styles.spacing : '';
+  const classes = `${styles.btn} ${styles[position]} ${styles[kind]} ${spacingClass}`;
 
   return (
     <button
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
index 3219a96..fca8013 100644
--- a/src/components/Buttons/Buttons.module.scss
+++ b/src/components/Buttons/Buttons.module.scss
@@ -276,3 +276,8 @@
     }
   }
 }
+
+.spacing {
+  margin-top: var(--spacing-md);
+  margin-bottom: var(--spacing-md);
+}
diff --git a/src/components/PaginationCursor/PaginationCursor.module.scss b/src/components/PaginationCursor/PaginationCursor.module.scss
index 17e46ac..542584c 100644
--- a/src/components/PaginationCursor/PaginationCursor.module.scss
+++ b/src/components/PaginationCursor/PaginationCursor.module.scss
@@ -1,12 +1,14 @@
 @use "@styles/abstracts/functions" as fun;
 
 .wrapper {
-  margin: var(--spacing-sm) auto var(--spacing-md);
   width: max-content;
+  margin: var(--spacing-sm) auto var(--spacing-md);
+  text-align: center;
 
   .bar[value] {
     display: block;
-    width: 30ch;
+    width: clamp(25ch, 20vw, 30ch);
+    max-width: 100%;
     height: fun.convert-px(13);
     appearance: none;
     background: var(--color-bg-tertiary);
@@ -34,3 +36,8 @@
     }
   }
 }
+
+.info {
+  margin-bottom: var(--spacing-2xs);
+  font-size: var(--font-size-sm);
+}
diff --git a/src/components/PaginationCursor/PaginationCursor.tsx b/src/components/PaginationCursor/PaginationCursor.tsx
index a8c6265..3b0c15f 100644
--- a/src/components/PaginationCursor/PaginationCursor.tsx
+++ b/src/components/PaginationCursor/PaginationCursor.tsx
@@ -12,6 +12,16 @@ const PaginationCursor = ({
 
   return (
     <div className={styles.wrapper}>
+      <div className={styles.info}>
+        {intl.formatMessage(
+          {
+            defaultMessage:
+              '{articlesCount, plural, =0 {# loaded articles} one {# loaded article} other {# loaded articles}} out of a total of {total}',
+            description: 'PaginationCursor: loaded articles count message',
+          },
+          { articlesCount: current, total }
+        )}
+      </div>
       <progress
         className={styles.bar}
         max={total}
@@ -23,14 +33,6 @@ const PaginationCursor = ({
             'Number of articles loaded out of the total available.',
           description: 'PaginationCursor: loaded articles count aria-label',
         })}
-        title={intl.formatMessage(
-          {
-            defaultMessage:
-              '{articlesCount, plural, =0 {# articles} one {# article} other {# articles}} out of a total of {total}',
-            description: 'PaginationCursor: loaded articles count message',
-          },
-          { articlesCount: current, total }
-        )}
       ></progress>
     </div>
   );