fix: Extend the length of status bar and feed sufficient data

[R-HNF]

⚠️⚠️⚠️ Since we do not accept all types of pull requests and do not want to waste your time. Please be sure that you have read pull request rules:
https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md#can-i-create-a-pull-request-for-uptime-kuma

Tick the checkbox if you understand [x]:

• I have read and understand the pull request rules.

Description

• Changed the column size to col-6 to extend the length of the status bar.

  • I felt the following two points. Please refer to the screenshots below.
    • Using col-6 makes it easier to check the status on both large and small screens.
    • Easy to check listed monitors even when the monitor names are long.

• Increased the data retrieval to 100 items since extending the length of the status bar requires more heartbeat data to be displayed correctly.

  • This resolves the following comment: Could we extend the length of status bar? #4365 (comment).

Fixes #4365

Type of change

Please delete any options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)
• User interface (UI)
• Other
  • Change of parameter value

Checklist

• My code follows the style guidelines of this project
• I ran ESLint and other linters for modified files
• I have performed a self-review of my own code and tested it
• I have commented my code, particularly in hard-to-understand areas (including JSDoc for methods)
• My changes generates no new warnings
• My code needed automated testing. I have added them (this is optional task)

Screenshots (if any)

Please do not use any external image service. Instead, just paste in or drag and drop the image here, and it will be uploaded automatically.

Large Screen

Dashboard page

Status page

Small Screen

Dashboard page

Status page

[R-HNF]

I set LIMIT 100 to ensure there are no display issues even when using a 4K display. It would be helpful if the reviewer could also verify it.

Here is a screenshot (maxBeat is 90).

The maxBeat for the heart beat is calculated as follows. I temporarily added the log output to confirm the values.

uptime-kuma/src/components/HeartbeatBar.vue

Line 259 in 79a2618

this.maxBeat = Math.floor(this.$refs.wrap.clientWidth / (this.beatWidth + this.beatHoverAreaPadding * 2));

temporarily log output:

console.info({
    maxBeat: this.maxBeat,
    clientWidth: this.$refs.wrap.clientWidth,
    beatWidth: this.beatWidth,
    beatHoverAreaPadding2x: this.beatHoverAreaPadding * 2,
});

[R-HNF]

@CommanderStorm
Thank you so much for reviewing my PRs! I’d really appreciate it if you could take a look at this PR too. This one is just a small change.