Fix popover: fixd a minor css issue with the items

updated readme
prabhuignoto · Mar 5, 2024 · 468b093 · 468b093
1 parent bfd0afc
commit 468b093
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -189,19 +189,20 @@ Below are the available configuration options for the component:
 | onScrollEnd              |                      | Detects the end of the timeline via `onScrollEnd`.                                                                                       |
 | onThemeChange            |                      | Invokes a callback when the theme changes, triggered via `enableDarkToggle`.                                                             |
 | parseDetailsAsHTML       | false                | Parses the `cardDetailedText` as HTML.                                                                                                   |
+| responsiveBreakPoint     | 1024px               | Break point at which the timeline changes to `VERTICAL` mode when `VERTICAL_ALTERNATING` is the default mode                             |
 | scrollable               | true                 | Makes the timeline scrollable in `VERTICAL` and `VERTICAL_ALTERNATING` modes.                                                            |
 | showAllCardsHorizontal   | false                | Displays all cards in horizontal mode. By default, only the active card is shown.                                                        |
 | slideItemDuration        | 5000                 | Sets the duration (in milliseconds) that a timeline card is active during a slideshow.                                                   |
 | slideShow                | false                | Enables slideshow control.                                                                                                               |
+| textDensity              | HIGH                 | Configures the amount of text to be displayed in each timeline card. Can be either `HIGH` or `LOW`                                       |
 | textOverlay              | false                | Displays text as an overlay on media elements. Refer to [Text Overlay](#text-overlay-mode) for more info.                                |
 | theme                    |                      | Customizes colors. Refer to [Theme](#theme) for more info.                                                                               |
 | timelinePointDimension   |                      | Defines the dimensions of circular points on the timeline.                                                                               |
 | timelinePointShape       | circle               | Configures the shape of timeline points. Options: circle, square, diamond.                                                               |
 | titleDateFormat          | 'MMM DD, YYYY'       | Formats the date for each timeline item. Supports all [dayjs](https://day.js.org/) formats.                                              |
+| toolbarPosition          | TOP                  | Configures the position of the toolbar. Can be `TOP` or `BOTTOM`                                                                         |
 | uniqueId                 |                      | Used with `noUniqueId` to set a custom unique id for the wrapper.                                                                        |
 | useReadMore              | true                 | Enables or disables the "read more" button. Available if text content on the card is taller than the card itself.                        |
-| responsiveBreakPoint     | 1024px               | Break point at which the timeline changes to `VERTICAL` mode when `VERTICAL_ALTERNATING` is the default mode                             |
-| textDensity              | HIGH                 | Configures the amount of text to be displayed in each timeline card. Can be either `HIGH` or `LOW`                                       |
 
 ### Mode
 

diff --git a/src/components/elements/list/list.styles.ts b/src/components/elements/list/list.styles.ts
@@ -14,7 +14,7 @@ const commonStyles = `
   display: flex;
   margin: 0;
   margin-bottom: 0.5rem;
-  padding: 0.25rem 0.5rem;
+  // padding: 0.25rem 0.5rem;
   width: 100%;
 
   &:last-child {
@@ -26,11 +26,12 @@ const commonStyles = `
 export const ListStyle = styled.ul`
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
+  justify-content: center;
   list-style: none;
   margin: 0;
-  padding: 0;popo
+  padding: 0;
   width: 100%;
+  align-items: center;
 `;
 
 // List item styles
@@ -49,6 +50,8 @@ export const ListItemStyle = styled.li<{
     cursor: pointer;
   }
   user-select: none;
+  padding: 0.25rem;
+  width: calc(100% - 0.5rem);
 `;
 
 // Title styles

diff --git a/src/components/elements/popover/popover.styles.ts b/src/components/elements/popover/popover.styles.ts
@@ -82,7 +82,6 @@ export const Header = styled.div`
 export const Content = styled.div`
   height: calc(100% - 30px);
   overflow-y: auto;
-  padding: 0.25rem;
   width: calc(100% - 0rem);
 `;