From f2e182dedfb0939bd4b94b5b822bbd864ac32b85 Mon Sep 17 00:00:00 2001
From: BG-Software <73077398+BG-Software-BG@users.noreply.github.com>
Date: Thu, 21 Sep 2023 23:01:38 +0200
Subject: [PATCH] Fix heights, scrolls and layouts of some examples in Docs
 (#1705)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Mustafa Ateş Uzun <mustafauzun0@gmail.com>
Co-authored-by: Aditi Deshpande <aditideshpande2908@gmail.com>
Co-authored-by: Bartłomiej Gawęda <bgaweda@abis.krakow.pl>
---
 _config.yml                       |  4 +--
 docs/components/alerts.mdx        | 14 +++++-----
 docs/components/badges.mdx        | 14 +++++-----
 docs/components/buttons.mdx       | 46 +++++++++++++++----------------
 docs/components/cards.mdx         |  2 +-
 docs/components/datagrid.mdx      |  2 +-
 docs/components/divider.mdx       |  4 +--
 docs/components/dropdowns.mdx     | 22 +++++++--------
 docs/components/empty.mdx         |  6 ++--
 docs/components/inline-player.mdx |  4 +--
 docs/components/placeholder.mdx   |  6 ++--
 docs/components/range-slider.mdx  |  2 +-
 docs/components/statuses.mdx      | 14 +++++-----
 docs/components/tables.mdx        | 10 +++----
 docs/components/timelines.mdx     |  4 +--
 docs/components/toasts.mdx        |  2 +-
 docs/components/tooltips.mdx      |  4 +--
 site/styles/_docs.scss            |  7 +++--
 src/scss/vendor/_litepicker.scss  |  2 +-
 19 files changed, 86 insertions(+), 83 deletions(-)

diff --git a/_config.yml b/_config.yml
index e416eabe9..6db9c7fbf 100644
--- a/_config.yml
+++ b/_config.yml
@@ -222,7 +222,7 @@ socials:
     title: Tabler
 
 months-short: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-months-long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+months-long: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
 
 icons:
   link: https://tabler-icons.io
@@ -230,4 +230,4 @@ icons:
 emails:
   price: "$29"
   count: 54
-  buy_link: https://tabler.io/buy-emails
\ No newline at end of file
+  buy_link: https://tabler.io/buy-emails
diff --git a/docs/components/alerts.mdx b/docs/components/alerts.mdx
index ef606c117..dfb18ebb0 100644
--- a/docs/components/alerts.mdx
+++ b/docs/components/alerts.mdx
@@ -8,7 +8,7 @@ bootstrapLink: components/alerts/
 
 Depending on the information you need to convey, you can use one of the following types of alert messages - **success**, **info**, **warning** or **danger**. Using the right type of alert modal will help draw users' attention to the message and prompt them to take action.
 
-```html example vertical
+```html example vertical height="420px"
 <div class="alert alert-success" role="alert">
   <h4 class="alert-title">Wow! Everything worked!</h4>
   <div class="text-secondary">Your account has been saved!</div>
@@ -38,7 +38,7 @@ Depending on the information you need to convey, you can use one of the followin
 
 Add a link to your alert message to redirect users to the details they need to complete or additional information they should read.
 
-```html example vertical code
+```html example vertical code height="7rem"
 <div class="alert alert-danger m-0">
   This is a danger alert — <a href="#" class="alert-link">check it out</a>!
 </div>
@@ -48,7 +48,7 @@ Add a link to your alert message to redirect users to the details they need to c
 
 Add the `x` close button to make an alert modal dismissible. Thanks to that, your alert modal will disappear only once the user closes it.
 
-```html example
+```html example height="420px"
 <div class="alert alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
@@ -136,7 +136,7 @@ Add the `x` close button to make an alert modal dismissible. Thanks to that, you
 
 Add an icon to your alert modal to make it more user-friendly and help users easily identify the message.
 
-```html example
+```html example height="420px"
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
@@ -255,7 +255,7 @@ Add an icon to your alert modal to make it more user-friendly and help users eas
 
 Add an avatar to your alert modal to make it more personalized.
 
-```html code example
+```html code example height="420px"
 <div class="alert alert-success" role="alert">
   <div class="d-flex">
     <div>
@@ -302,7 +302,7 @@ Add an avatar to your alert modal to make it more personalized.
 
 Add primary and secondary buttons to your alert modals if you want users to take a particular action based on the information included in the modal message.
 
-```html code example
+```html code example height="500px" scrollable
 <div class="alert alert-success alert-dismissible" role="alert">
   <h3 class="mb-1">Some Title</h3>
   <p>Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
@@ -345,7 +345,7 @@ Add primary and secondary buttons to your alert modals if you want users to take
 
 If you want your alert to be really eye-catching, you can add a class `alert-important`.
 
-```html example vertical height="20rem"
+```html example vertical height="210px"
 <div class="alert alert-important alert-success alert-dismissible" role="alert">
   <div class="d-flex">
     <div>
diff --git a/docs/components/badges.mdx b/docs/components/badges.mdx
index 2206879b7..c2cdf3c4d 100644
--- a/docs/components/badges.mdx
+++ b/docs/components/badges.mdx
@@ -10,7 +10,7 @@ bootstrapLink: components/badge/
 
 The default badges are square and come in the basic set of colors.
 
-```html code example centered separated
+```html code example vertical centered separated scrollable height="15rem"
 <span class="badge bg-blue">Blue</span>
 <span class="badge bg-azure">Azure</span>
 <span class="badge bg-indigo">Indigo</span>
@@ -27,7 +27,7 @@ The default badges are square and come in the basic set of colors.
 
 ## Headings
 
-```html code example
+```html code example height="240px"
 <h1>Example heading <span class="badge bg-secondary">New</span></h1>
 <h2>Example heading <span class="badge bg-secondary">New</span></h2>
 <h3>Example heading <span class="badge bg-secondary">New</span></h3>
@@ -38,7 +38,7 @@ The default badges are square and come in the basic set of colors.
 
 ## Outline badges
 
-```html code example centered separated
+```html code example vertical centered separated scrollable height="15rem"
 <span class="badge badge-outline text-blue">blue</span>
 <span class="badge badge-outline text-azure">azure</span>
 <span class="badge badge-outline text-indigo">indigo</span>
@@ -57,7 +57,7 @@ The default badges are square and come in the basic set of colors.
 
 Use the `.badge-pill` class if you want to create a badge with rounded corners. Its width will adjust to the label text.
 
-```html code example centered separated
+```html code example centered separated height="7rem"
 <span class="badge badge-pill bg-blue">1</span>
 <span class="badge badge-pill bg-azure">2</span>
 <span class="badge badge-pill bg-indigo">3</span>
@@ -76,7 +76,7 @@ Use the `.badge-pill` class if you want to create a badge with rounded corners.
 
 You can create a soft colour variant of a corresponding contextual badge variation, to make it look more subtle. Click [here](colors) to see the list of available colors and choose ones that best suit your design.
 
-```html code example centered separated
+```html code example vertical centered separated scrollable height="15rem"
 <span class="badge bg-blue-lt">Blue</span>
 <span class="badge bg-azure-lt">Azure</span>
 <span class="badge bg-indigo-lt">Indigo</span>
@@ -95,7 +95,7 @@ You can create a soft colour variant of a corresponding contextual badge variati
 
 Place the badge within an `<a>` element if you want it to perform the function of a link and make it clickable.
 
-```html code example centered separated
+```html code example vertical centered separated scrollable height="15rem"
 <a href="#" class="badge bg-blue">Blue</a>
 <a href="#" class="badge bg-azure">Azure</a>
 <a href="#" class="badge bg-indigo">Indigo</a>
@@ -114,7 +114,7 @@ Place the badge within an `<a>` element if you want it to perform the function o
 
 Badges can be used as part of links or buttons to provide a counter.
 
-```html example centered separated
+```html example centered separated height="7rem"
 <button type="button" class="btn">Notifications <span class="badge bg-red ms-2">4</span></button>
 <button type="button" class="btn">Notifications <span class="badge bg-green ms-2">4</span></button>
 ```
diff --git a/docs/components/buttons.mdx b/docs/components/buttons.mdx
index 0526c89c1..0482a11b5 100644
--- a/docs/components/buttons.mdx
+++ b/docs/components/buttons.mdx
@@ -8,7 +8,7 @@ bootstrapLink: components/buttons/
 
 As one of the most common elements of UI design, buttons have a very important function of engaging users with your website or app and guiding them in their actions. Use the `.btn` classes with the `<button>` element and add additional styling that will make your buttons serve their purpose and draw users' attention.
 
-```html example code centered separated
+```html example code centered separated height="7rem"
 <a href="#" class="btn" role="button">Link</a>
 <button class="btn">Button</button>
 <input type="button" class="btn" value="Input" />
@@ -20,7 +20,7 @@ As one of the most common elements of UI design, buttons have a very important f
 
 The standard button creates a white background and subtle hover animation. It's meant to look and behave as an interactive element of your page.
 
-```html example code centered separated
+```html example code centered separated height="7rem"
 <a href="#" class="btn" role="button">Link</a>
 ```
 
@@ -28,7 +28,7 @@ The standard button creates a white background and subtle hover animation. It's
 
 Use the button classes that correspond to the function of your button. The big range of available colors will help you show your buttons' purpose and make them easy to spot.
 
-```html example code centered separated
+```html code example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-primary">Primary</a>
 <a href="#" class="btn btn-secondary">Secondary</a>
 <a href="#" class="btn btn-success">Success</a>
@@ -43,7 +43,7 @@ Use the button classes that correspond to the function of your button. The big r
 
 Make buttons look inactive to show that an action is possible once the user meets certain criteria, such as completing the required fields to submit a form.
 
-```html example code centered separated
+```html code example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-primary disabled">Primary</a>
 <a href="#" class="btn btn-secondary disabled">Secondary</a>
 <a href="#" class="btn btn-success disabled">Success</a>
@@ -58,7 +58,7 @@ Make buttons look inactive to show that an action is possible once the user meet
 
 Choose the right color for your button to make it go well with your design and draw users' attention. Button colors can have a big influence on users' decisions, which is why it's important to choose them based on the intended purpose.
 
-```html example code centered separated
+```html code example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-blue">Blue</a>
 <a href="#" class="btn btn-azure">Azure</a>
 <a href="#" class="btn btn-indigo">Indigo</a>
@@ -77,7 +77,7 @@ Choose the right color for your button to make it go well with your design and d
 
 Use the `.btn-ghost-*` class to make your button look simple yet aesthetically appealing. Ghost buttons help focus users' attention on the website's primary design, at the same time encouraging them to take action.
 
-```html example centered separated
+```html example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-ghost-primary">Primary</a>
 <a href="#" class="btn btn-ghost-secondary">Secondary</a>
 <a href="#" class="btn btn-ghost-success">Success</a>
@@ -103,7 +103,7 @@ Use the `.btn-ghost-*` class to make your button look simple yet aesthetically a
 
 Use the `.btn-square` class to remove the border radius, if you want the corners of your button to be square rather than rounded.
 
-```html example centered separated
+```html example centered separated height="7rem"
 <a href="#" class="btn btn-square">Square button</a>
 ```
 
@@ -117,7 +117,7 @@ Use the `.btn-square` class to remove the border radius, if you want the corners
 
 Add the `.btn-pill` class to your button to make it rounded and give it a modern and attractive look.
 
-```html example centered separated
+```html example centered separated height="7rem"
 <a href="#" class="btn btn-pill">Pill button</a>
 ```
 
@@ -131,7 +131,7 @@ Add the `.btn-pill` class to your button to make it rounded and give it a modern
 
 Replace the default modifier class with the `.btn-outline-*` class, if you want to remove the color and the background of your button and give it a more subtle look. Outline buttons are perfect to use as secondary buttons, as they don't distract users from the main action.
 
-```html example centered separated
+```html example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-outline-primary">Primary</a>
 <a href="#" class="btn btn-outline-secondary">Secondary</a>
 <a href="#" class="btn btn-outline-success">Success</a>
@@ -173,12 +173,12 @@ Replace the default modifier class with the `.btn-outline-*` class, if you want
 
 Add `.btn-lg` or `.btn-sm` to change the size of your button and differentiate those which should have primary focus from those of secondary importance. Adapt the button size to your design and encourage users to take actions.
 
-```html code example centered separated
+```html code example centered separated height="8rem"
 <button type="button" class="btn btn-primary btn-lg">Large button</button>
 <button type="button" class="btn btn-lg">Large button</button>
 ```
 
-```html code example centered separated
+```html code example centered separated height="7rem"
 <button type="button" class="btn btn-primary btn-sm">Small button</button>
 <button type="button" class="btn btn-sm">Small button</button>
 ```
@@ -189,7 +189,7 @@ Label your button with text and add an icon to communiacate the action and make
 
 Icons can be found [**here**](/docs/components/icons)
 
-```html example centered separated
+```html example centered separated height="7rem"
 <button type="button" class="btn"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
@@ -260,7 +260,7 @@ Icons can be found [**here**](/docs/components/icons)
 
 You can use the icons of popular social networking sites, which users are familiar with. Thanks to buttons with social media icons users can share content or follow a website with just one click, without leaving the website.
 
-```html example centered separated
+```html example vertical centered separated scrollable height="15rem"
 <a href="#" class="btn btn-facebook"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
     <path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
@@ -408,7 +408,7 @@ You can use the icons of popular social networking sites, which users are famili
 
 You can also add an icon without the name of a social networking site, if you want to display more buttons on a small space.
 
-```html example centered separated
+```html example separated scrollable height="7rem"
 <a href="#" class="btn btn-facebook btn-icon" aria-label="Button">
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -572,7 +572,7 @@ You can also add an icon without the name of a social networking site, if you wa
 
 Add the `.btn-icon` class to remove unnecessary padding from your button and use an icon without any additional label. Thanks to that, you can save space and make the action easy to recognize for international users.
 
-```html example centered separated
+```html example centered separated height="7rem"
 <a href="#" class="btn btn-primary btn-icon" aria-label="Button">
   <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -664,7 +664,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
 
 Create a dropdown button that will encourage users to click for more options. You can add a label with an icon or remove the label and add an icon on its own if you want to save space. Choose the option that will best suit your design and improve the user experience.
 
-```html example centered separated
+```html example centered separated height="7rem"
 <div class="dropdown">
   <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
       <path stroke="none" d="M0 0h24v24H0z" fill="none" />
@@ -753,7 +753,7 @@ Create a dropdown button that will encourage users to click for more options. Yo
 
 Add the `.btn-loading` class to show a button's loading state, which can be useful in the case of operations that take longer to process. Thanks to that, users will be aware of the current state of their action and won't give it up before it's finished.
 
-```html example centered separated
+```html example centered separated height="7rem"
 <a href="#" class="btn btn-primary btn-loading">Button</a>
 <a href="#" class="btn btn-primary btn-loading">Loading button with loooong content</a>
 ```
@@ -767,7 +767,7 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef
 </a>
 ```
 
-```html example
+```html example centered height="7rem"
 <a href="#" class="btn btn-primary"><span class="spinner-border spinner-border-sm me-2" role="status"></span> Button</a>
 ```
 
@@ -782,7 +782,7 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef
 
 Create a list of buttons using the `.btn-list` container to display different actions a user can take. If you add aditional styling, such as colours, you will be able to focus users' attention on a particular action or suggest the result.
 
-```html code example vertical centered columns={3}
+```html code example vertical centered columns={3} height="7rem"
 <div class="btn-list">
   <a href="#" class="btn btn-success">Save changes</a>
   <a href="#" class="btn">Save and continue</a>
@@ -818,21 +818,21 @@ If the list is long, it will be wrapped and some buttons will be moved to the ne
 
 Use the `.text-center` or the `.text-end` modifiers to change the buttons' alignment and place them where they suit best.
 
-```html code example vertical centered columns={3}
+```html code example vertical centered columns={3} height="7rem"
 <div class="btn-list justify-content-center">
   <a href="#" class="btn">Save and continue</a>
   <a href="#" class="btn btn-primary">Save changes</a>
 </div>
 ```
 
-```html code example vertical centered columns={3}
+```html code example vertical centered columns={3} height="7rem"
 <div class="btn-list justify-content-end">
   <a href="#" class="btn">Save and continue</a>
   <a href="#" class="btn btn-primary">Save changes</a>
 </div>
 ```
 
-```html code example vertical centered columns={3}
+```html code example vertical centered columns={3} height="7rem"
 <div class="btn-list">
   <a href="#" class="btn btn-outline-danger me-auto">Delete</a>
   <a href="#" class="btn">Save and continue</a>
@@ -844,7 +844,7 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align
 
 Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
 
-```html example centered separated
+```html example centered separated height="7rem"
 <a href="#" class="btn"><span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1542534759-05f6c34a9e63?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar</a>
 <a href="#" class="btn"><span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1546539782-6fc531453083?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar</a>
 <a href="#" class="btn"><span class="avatar" style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1541585452861-0375331f10bf?q=80&fm=jpg&crop=faces&fit=crop&h=100&w=100)'}}></span> Avatar</a>
diff --git a/docs/components/cards.mdx b/docs/components/cards.mdx
index 9dbc30f48..c23b4b0d0 100644
--- a/docs/components/cards.mdx
+++ b/docs/components/cards.mdx
@@ -125,7 +125,7 @@ Add an image to your blog post card to make it eye-catching. You can do it by ad
 
 Add the `.row-deck` class to `.row`, if you want to display several cards next to one another. Thanks to that, they will all have the same height.
 
-```html code example centered
+```html code example centered height="220px"
 <div class="row row-deck">
   <div class="col-md-4">
     <div class="card">
diff --git a/docs/components/datagrid.mdx b/docs/components/datagrid.mdx
index 51723ffef..638c09802 100644
--- a/docs/components/datagrid.mdx
+++ b/docs/components/datagrid.mdx
@@ -3,7 +3,7 @@ title: Data grid
 description: Use the data grid component to display detailed information about your product. The data is displayed as a column of items consisting of a title and content.
 ---
 
-```html example code vcentered height="22rem"
+```html example code vcentered height="460px"
 <div class="datagrid">
   <div class="datagrid-item">
     <div class="datagrid-title">Registrar</div>
diff --git a/docs/components/divider.mdx b/docs/components/divider.mdx
index a3f42b2d5..3e7bd7225 100644
--- a/docs/components/divider.mdx
+++ b/docs/components/divider.mdx
@@ -22,7 +22,7 @@ Use dividers to visually separate content into parts. You can use a line only or
 
 You can modify the position of the text which is to be included in a separator and make it left- or right-aligned. Otherwise, the text will remain centered.
 
-```html code example
+```html code example height="380px"
 <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 </p>
@@ -44,7 +44,7 @@ You can modify the position of the text which is to be included in a separator a
 
 Customize the color of dividers to make them go well with your design. Click [here](colors) to see the list of available colors.
 
-```html code example
+```html code example height="380px"
 <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolore dolores doloribus est ex.
 </p>
diff --git a/docs/components/dropdowns.mdx b/docs/components/dropdowns.mdx
index 497dae882..39257e9f4 100644
--- a/docs/components/dropdowns.mdx
+++ b/docs/components/dropdowns.mdx
@@ -8,7 +8,7 @@ bootstrapLink: components/dropdowns
 
 With small markup changes, you can turn any `.btn` into a dropdown toggle and use it to display more options for users to choose from. Start with the default dropdown and then use additional classes to make your dropdown more user-friendly.
 
-```html example code height="20rem"
+```html example code height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -23,7 +23,7 @@ With small markup changes, you can turn any `.btn` into a dropdown toggle and us
 
 Use dropdown dividers to separate groups of dropdown items for greater clarity.
 
-```html example code height="20rem"
+```html example code height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -43,7 +43,7 @@ Use dropdown dividers to separate groups of dropdown items for greater clarity.
 
 Make a dropdown item look active, so that it highlights when a user hovers over a given option.
 
-```html example code height="20rem"
+```html example code height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -62,7 +62,7 @@ Make a dropdown item look active, so that it highlights when a user hovers over
 
 Make a dropdown item look disabled to display options which are currently not available but can activate once certain conditions are met.
 
-```html code example height="20rem"
+```html code example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -81,7 +81,7 @@ Make a dropdown item look disabled to display options which are currently not av
 
 Add a dropdown header to group dropdown items into sections and name them accordingly.
 
-```html code example height="20rem"
+```html code example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -100,7 +100,7 @@ Add a dropdown header to group dropdown items into sections and name them accord
 
 Use icons in your dropdowns to add more visual content and make the options easy to identify for users.
 
-```html code example height="20rem"
+```html code example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -129,7 +129,7 @@ Use icons in your dropdowns to add more visual content and make the options easy
 
 Add an arrow that points at the dropdown button.
 
-```html code example height="20rem"
+```html code example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu dropdown-menu-arrow">
@@ -147,7 +147,7 @@ Add an arrow that points at the dropdown button.
 
 Add a badge to your dropdown items to show additional information related to an item or distinguish it from other elements.
 
-```html code example height="20rem"
+```html code example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -167,7 +167,7 @@ Add a badge to your dropdown items to show additional information related to an
 
 Use dropdowns with checkboxes to allow users to select options from a predefined list. Dropdowns with checkboxes are particularly useful for filtering.
 
-```html code example height="20rem"
+```html code example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu">
@@ -182,7 +182,7 @@ Use dropdowns with checkboxes to allow users to select options from a predefined
 
 Make your dropdown suit the dark mode of your website or software.
 
-```html code example height="20rem"
+```html code example height="16rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
   <div class="dropdown-menu dropdown-menu-arrow bg-dark text-white">
@@ -215,7 +215,7 @@ Use a dropdown with card content to make it easy for users to get more informati
 ```html example height="35rem"
 <div class="dropdown">
   <a href="#" class="btn dropdown-toggle" data-bs-toggle="dropdown">Open dropdown</a>
-  <div class="dropdown-menu dropdown-menu-card" style="max-width: 20rem;">
+  <div class="dropdown-menu dropdown-menu-card" style="max-width: 16rem;">
     <div class="card d-flex flex-column">
       <a href="#">
         <img class="card-img-top" src="/samples/photos/friends-at-a-restaurant-drinking-wine.jpg" alt="How do you know she is a witch?" />
diff --git a/docs/components/empty.mdx b/docs/components/empty.mdx
index a801bc1d7..8334ead5f 100644
--- a/docs/components/empty.mdx
+++ b/docs/components/empty.mdx
@@ -7,7 +7,7 @@ description: Empty states or blank pages are commonly used as placeholders for f
 
 Use the default empty state to engage users in the critical moments of their experience with your website or app. A good empty state screen should let users know what is happening and what they should do next as well as encourage them to take action.
 
-```html code example
+```html code example height="300px"
 <div class="empty">
   <div class="empty-icon">
     <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -39,7 +39,7 @@ Use the default empty state to engage users in the critical moments of their exp
 
 Make your empty state screen more attractive and engaging by adding an illustration. Thanks to a more personalized design, you will improve your brand image and make your website or app more user friendly.
 
-```html code example
+```html code example height="300px"
 <div class="empty">
   <div class="empty-img"><img src="..." height="128" alt="" />
   </div>
@@ -64,7 +64,7 @@ Make your empty state screen more attractive and engaging by adding an illustrat
 
 Instead of adding an icon or illustration you can simply give the text:
 
-```html example
+```html example height="300px"
 <div class="empty">
   <div class="empty-header">404</div>
   <p class="empty-title">Oops… You just found an error page</p>
diff --git a/docs/components/inline-player.mdx b/docs/components/inline-player.mdx
index 8c9a74a54..ffdb67efd 100644
--- a/docs/components/inline-player.mdx
+++ b/docs/components/inline-player.mdx
@@ -6,7 +6,7 @@ description: A simple, lightweight, accessible and customizable HTML5, YouTube a
 
 ## Sample demo
 
-```html example code vendors
+```html example code vendors height="500px"
 <div id="player-youtube" data-plyr-provider="youtube" data-plyr-embed-id="dQw4w9WgXcQ"></div>
 
 <script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
@@ -19,7 +19,7 @@ description: A simple, lightweight, accessible and customizable HTML5, YouTube a
 
 ## Vimeo file
 
-```html example code vendors
+```html example code vendors height="500px"
 <div id="player-vimeo" data-plyr-provider="vimeo" data-plyr-embed-id="515937365"></div>
 
 <script src="$TABLER_CDN/dist/libs/plyr/dist/plyr.min.js"></script>
diff --git a/docs/components/placeholder.mdx b/docs/components/placeholder.mdx
index 7f0f4d8b3..111255b35 100644
--- a/docs/components/placeholder.mdx
+++ b/docs/components/placeholder.mdx
@@ -81,7 +81,7 @@ You can use a placeholder, which will look like a picture. You can use the `rati
 
 You can also use the `ratio` component, and get the image in the right proportions.
 
-```html code example columns={1}
+```html code example columns={1} height={500} scrollable
 <div class="ratio ratio-1x1 placeholder">
   <div class="placeholder-image"></div>
 </div>
@@ -100,7 +100,7 @@ You can also use the `ratio` component, and get the image in the right proportio
 
 By default, the `placeholder` uses `currentColor`. This can be overridden with a custom color or utility class.
 
-```html example columns={1}
+```html example columns={1} height={240}
 <span class="placeholder col-12"></span>
 <span class="placeholder col-12 bg-primary"></span>
 <span class="placeholder col-12 bg-secondary"></span>
@@ -153,7 +153,7 @@ Animate placeholders with `.placeholder-glow` or `.placeholder-wave` to better c
 
 See in the following examples how else you can use the placeholder component
 
-```html code example columns={1} height={1000} separated vertical
+```html code example columns={1} height={1000} separated vertical scrollable
 <div class="card placeholder-glow">
   <div class="ratio ratio-21x9 card-img-top placeholder"></div>
   <div class="card-body">
diff --git a/docs/components/range-slider.mdx b/docs/components/range-slider.mdx
index 15323ee5e..ea26c5a5f 100644
--- a/docs/components/range-slider.mdx
+++ b/docs/components/range-slider.mdx
@@ -9,7 +9,7 @@ All options and features can be found [**here**](https://refreshless.com/nouisli
 
 ## Basic range slider
 
-```html code example
+```html code example centered
 <div data-slider='{"js-name": "slider0","start": 50,"range": {"min": 0,"max": 100}}'></div>
 <p demo-slider="slider0"></p>
 ```
diff --git a/docs/components/statuses.mdx b/docs/components/statuses.mdx
index bb9773a55..067aaf90c 100644
--- a/docs/components/statuses.mdx
+++ b/docs/components/statuses.mdx
@@ -5,7 +5,7 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ## Default markup
 
-```html example vertical
+```html example vertical height="7rem"
 <span class="status status-blue">Blue</span>
 <span class="status status-azure">Azure</span>
 <span class="status status-indigo">Indigo</span>
@@ -28,7 +28,7 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ## Status with dot
 
-```html example code vertical
+```html example code vertical height="7rem"
 <span class="status status-blue">
   <span class="status-dot"></span>
   Blue
@@ -81,7 +81,7 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ### Animated dot
 
-```html example code vertical
+```html example code vertical height="7rem"
 <span class="status status-blue">
   <span class="status-dot status-dot-animated"></span>
   Blue
@@ -134,7 +134,7 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ## Lite status
 
-```html example code vertical
+```html example code vertical height="7rem"
 <span class="status status-blue status-lite">
   <span class="status-dot"></span>
   Blue
@@ -187,7 +187,7 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ## Status dots
 
-```html example code vertical
+```html code example centered separated height="7rem"
 <span class="status-dot status-blue"></span>
 <span class="status-dot status-azure"></span>
 <span class="status-dot status-indigo"></span>
@@ -204,7 +204,7 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ### Animated dots
 
-```html example code vertical
+```html code example centered separated height="7rem"
 <span class="status-dot status-dot-animated status-blue"></span>
 <span class="status-dot status-dot-animated status-azure"></span>
 <span class="status-dot status-dot-animated status-indigo"></span>
@@ -221,7 +221,7 @@ description: Status dots are particularly useful if you want to make an interfac
 
 ## Status indicator
 
-```html code example vertical
+```html code example vertical centered height="7rem"
 <span class="status-indicator status-blue status-indicator-animated">
   <span class="status-indicator-circle"></span>
   <span class="status-indicator-circle"></span>
diff --git a/docs/components/tables.mdx b/docs/components/tables.mdx
index 4fe29e2ca..4b41a2937 100644
--- a/docs/components/tables.mdx
+++ b/docs/components/tables.mdx
@@ -6,11 +6,11 @@ bootstrapLink: content/tables/
 
 ## Basic Table
 
-The basic table design has light padding and the presented data is separated wih horizontal dividers. It helps provide users with all the necessary information, without overwheling them with visuals.
+The basic table design has light padding and the presented data is separated wih horizontal dividers. It helps provide users with all the necessary information, without overwhelming them with visuals.
 
 The `.table` class adds basic styling to a table:
 
-```html code example
+```html code example height="360px" scrollable
 <div class="table-responsive">
   <table class="table table-vcenter">
     <thead>
@@ -97,7 +97,7 @@ The `.table` class adds basic styling to a table:
 
 Use the `.table-responsive` class across each breakpoint for horizontal scrolling tables. If you want to create responsive tables up to a specific breakpoint, use `.table-responsive{-sm|-md|-lg|-xl}`. From that breakpoint and up, the table will behave normally, rather than scroll horizontally.
 
-```html code example
+```html code example height="12rem"
 <table class="table table-responsive">
   <thead>
     <tr>
@@ -149,7 +149,7 @@ Use the `.table-responsive` class across each breakpoint for horizontal scrollin
 
 If you don't want the table cell content to wrap to another line, use the `table-nowrap` class.
 
-```html example
+```html example height="10rem"
 <div class="table-responsive">
   <table class="table table-vcenter table-nowrap">
     <thead>
@@ -289,7 +289,7 @@ If you don't want the table cell content to wrap to another line, use the `table
 
 ## Table Variants
 
-```html code example
+```html code example height="360px" scrollable
 <table class="table">
   <thead>
     <tr>
diff --git a/docs/components/timelines.mdx b/docs/components/timelines.mdx
index d258cf8fb..2abafbe91 100644
--- a/docs/components/timelines.mdx
+++ b/docs/components/timelines.mdx
@@ -7,7 +7,7 @@ description: A timeline is a perfect way to visualize processes and projects, as
 
 The available timeline design is comprised of many components that will help you visualize a process or show an outline of events. Thanks to the possibility of adding icons, avatars and links and the way of presenting the elements of content, your timeline will be clear for users and will make yor website or app more attractive.
 
-```html example
+```html example height="400px" scrollable
 <ul class="timeline">
   <li class="timeline-event">
     <div class="timeline-event-icon bg-twitter-lt">
@@ -258,7 +258,7 @@ The available timeline design is comprised of many components that will help you
 
 Use a simplified version of the timeline, if it suits your design better. You can still make use of all the available timeline components.
 
-```html example
+```html example height="400px" scrollable
 <ul class="timeline timeline-simple">
   <li class="timeline-event">
     <div class="timeline-event-icon bg-twitter-lt">
diff --git a/docs/components/toasts.mdx b/docs/components/toasts.mdx
index d8aa2b550..35d51eacd 100644
--- a/docs/components/toasts.mdx
+++ b/docs/components/toasts.mdx
@@ -44,7 +44,7 @@ Toasts blend over the elements they appear over. If a browser supports the `back
 
 Stack multiple toasts together by putting them within one `.toast-container`.
 
-```html example code
+```html example code height="260px"
 <div class="toast-container">
   <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false" data-bs-toggle="toast">
     <div class="toast-header">
diff --git a/docs/components/tooltips.mdx b/docs/components/tooltips.mdx
index 1a493a0a7..2e6042c15 100644
--- a/docs/components/tooltips.mdx
+++ b/docs/components/tooltips.mdx
@@ -8,7 +8,7 @@ bootstrapLink: components/tooltips/
 
 Use the default markup to create tooltips that will help users understand particular elements of your interface. You can decide where the text label is to be displayed - at the top, bottom or on either side of the element.
 
-```html code example
+```html code example centered separated
 <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
   Tooltip on top
 </button>
@@ -27,7 +27,7 @@ Use the default markup to create tooltips that will help users understand partic
 
 If the default tooltip is not enough, you can add the option to use HTML code in the text to highlight particular bits of information and make the content more attractive.
 
-```html code example
+```html code example height="7rem"
 <button type="button" class="btn" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
   Tooltip with HTML
 </button>
diff --git a/site/styles/_docs.scss b/site/styles/_docs.scss
index f5b745a84..ec1237b22 100644
--- a/site/styles/_docs.scss
+++ b/site/styles/_docs.scss
@@ -92,5 +92,8 @@
   }
 }
 
-
-
+div.example {
+  iframe.example-frame {
+    min-height: 7rem !important;
+  }
+}
diff --git a/src/scss/vendor/_litepicker.scss b/src/scss/vendor/_litepicker.scss
index 3985c0c53..a4eea15b3 100644
--- a/src/scss/vendor/_litepicker.scss
+++ b/src/scss/vendor/_litepicker.scss
@@ -30,7 +30,7 @@
     }
 
     .button-next-month,
-    .button-prev-month {
+    .button-previous-month {
       cursor: pointer !important;
     }