Skip to content

Widget width not matching expected result on larger screen sizes #14412

@detectity-revs

Description

@detectity-revs

Bug description

The widget width value at the 50% option does not match expectations when viewed at larger screen sizes. When set to 'width' => 50 in the configuration, it will instead show at 33% width rather than 50% width.

I've identified the source of the issue is defined in cms/resources/js/pages/Dashboard.vue, where @7xl:w-1/3 is set instead of @7xl:w-1/2. Manually changing this in the web inspector tools corrects the problem.

How to reproduce

  1. Create two collections named example_1 and example_2, or use two existing collections
  2. Define dashboard widgets in config/statamic/cp.php to the above collections:
'widgets' => [
    [
        'type' => 'collection',
        'collection' => 'example_1',
        'width' => 50,
    ],
    [
        'type' => 'collection',
        'collection' => 'example_2',
        'width' => 50,
    ],
],
  1. Navigate to the dashboard page
  2. Enlarge screen size to at least 1554px wide
  3. Observe error with width of widgets being shown at 33% instead of 50%

Logs

Environment

Environment
Application Name: **REDACTED**
Laravel Version: 12.55.1
PHP Version: 8.3.30
Composer Version: 2.9.5
Environment: local
Debug Mode: ENABLED
URL: **REDACTED**
Maintenance Mode: OFF
Timezone: UTC
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: redis
Database: sqlite
Logs: stack / single
Mail: log
Queue: sync
Session: file

Storage
public/storage: NOT LINKED

Statamic
Addons: 1
Sites: 1
Stache Watcher: Disabled
Static Caching: Disabled
Version: 6.7.3 PRO

Statamic Addons
statamic/seo-pro: 7.3.0

Installation

Fresh statamic/statamic site via CLI

Additional details

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions