Horizontal Line thicker in some places.

[DanniDesign]

Description

It might be an issue on my end, so correct me if I'm wrong but for some reason the horizontal like is like 2px thicker than others while the code is the same for all of them.

Minimal Reproduction

<script lang="ts">
  import { Drawer, Hr } from "flowbite-svelte";
  import { ServerOutline } from 'flowbite-svelte-icons'

  let { open = $bindable(), isOnline, heartbeat } = $props();
  let modbusState = $derived(isOnline ? "Healthy" : "Error");

  let modbusDataAge = $derived(heartbeat.modbus_data_age.toFixed(1))
  let modbusHostAddress = $derived(heartbeat.modbus_host_address)
  let modbusPort = $derived(heartbeat.modbus_port)
</script>

<Drawer bind:open aria-labelledby="drawer-label">
  <h5 id="drawer-label" class="mb-4 inline-flex items-center text-base font-semibold text-gray-500 dark:text-gray-400">
    <ServerOutline class="me-2.5 h-5 w-5" />Modbus status
  </h5>
  <div class="flex">
    <p class="font-bold text-black dark:text-white">Status: </p>
    <p class={isOnline ? "text-green-600 dark:text-green-400 pl-1" : "text-red-600 dark:text-red-400 pl-1"}>{modbusState}</p>
  </div>
  <Hr class="my-2" />

  <div class="flex">
    <p class="font-bold text-black dark:text-white">Data age: </p>
    <p class="font-light pl-1 text-black dark:text-white">{modbusDataAge}s</p>
  </div>
  <Hr class="my-2" />

  <div class="flex">
    <p class="font-bold text-black dark:text-white">Host address: </p> <p class="font-light pl-1 text-black dark:text-white">{modbusHostAddress}</p>
  </div>
  <Hr class="my-2" />
  <div class="flex">
    <p class="font-bold text-black dark:text-white">Host port: </p>
    <p class="font-light pl-1 text-black dark:text-white">
      {modbusPort}
    </p>
  </div>
  <Hr class="my-2" />
</Drawer>


@import "tailwindcss";
@plugin 'flowbite/plugin';
@custom-variant dark (&:where(.dark, .dark *));
@theme {
  --color-primary-50: #fff5f2;
  --color-primary-100: #fff1ee;
  --color-primary-200: #ffe4de;
  --color-primary-300: #ffd5cc;
  --color-primary-400: #ffbcad;
  --color-primary-500: #fe795d;
  --color-primary-600: #ef562f;
  --color-primary-700: #eb4f27;
  --color-primary-800: #cc4522;
  --color-primary-900: #a5371b;
  --tw-ring-color: rgb(0 0 0 / 0) !important;
  --tw-ring-shadow: rgb(0 0 0 / 0) !important;
  --tw-box-shadow: rgb(0 0 0 / 0) !important;
}
@source "../../node_modules/flowbite-svelte/dist";
@source "../../node_modules/flowbite-svelte-icons/dist";

Steps to Reproduce

1. Make a drawer with horizontal lines in it
2. See one horizontal line be thicker than the others

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 AMD Ryzen 7 5800H with Radeon Graphics
    Memory: 2.67 GB / 15.41 GB
  Binaries:
    Node: 22.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.28.0 - C:\Users\ikdan\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (140.0.3485.54)
    Internet Explorer: 11.0.26100.7309
  npmPackages:
    @sveltejs/kit: ^2.49.1 => 2.49.4
    flowbite: ^4.0.1 => 4.0.1
    flowbite-svelte: ^1.31.0 => 1.31.0
    svelte: ^5.45.6 => 5.46.3
    vite: ^7.2.6 => 7.3.1

Relevant Logs / Console Output

Screenshots / GIF (optional)

Additional Context (optional)

No response

Checklist

• I have searched existing issues and discussions
• I have provided a minimal and runnable reproduction
• I am using the latest version of Flowbite-Svelte