extend MediaResource broking grid view style

[afsharmn]

Filament Version

v3.2

Plugin Version

v3.6

PHP Version

PHP 8.2.12

Problem description

when i using
->resource(\App\Filament\Resources\CustomMediaResource::class) in plugins registeration or
'resource' => \App\Filament\Resources\CustomMediaResource::class, in config file ,
the grid layout is not woking correctly.

and this is my CustomMediaResource (nothing changed) :

<?php

namespace App\Filament\Resources;

use Awcodes\Curator\Resources\MediaResource;

class CustomMediaResource extends MediaResource
{

}

Expected behavior

i want to disable delete and edit on some items

i hope an update fixing this.

Steps to reproduce

this is my CustomMediaResource (nothing changed) :

<?php

namespace App\Filament\Resources;

use Awcodes\Curator\Resources\MediaResource;

class CustomMediaResource extends MediaResource
{

}

Reproduction repository

No response

Relevant log output

No response

[awcodes]

Did you follow the installation instructions about incorporating with a custom theme?

[afsharmn]

yes.
I also use tiptap-editor and it is working good.

'admin' theme is added .

here is tailwind.config.js :

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './vendor/awcodes/filament-tiptap-editor/resources/**/*.blade.php',
        './vendor/awcodes/filament-curator/resources/**/*.blade.php',
    ],
}

here is theme.scss :

@import '/vendor/filament/filament/resources/css/theme.css';

@import '/vendor/awcodes/filament-tiptap-editor/resources/css/plugin.css';

@import 'cropperjs/dist/cropper.css';
@import '/vendor/awcodes/filament-curator/resources/css/plugin.css';

@config 'tailwind.config.js';

and setup procces is done ( steps below ):

⇂ First, add a new item to the `input` array of `vite.config.js`: `resources/css/filament/admin/theme.css`
⇂ Next, register the theme in the admin panel provider using `->viteTheme('resources/css/filament/admin/theme.css')`
⇂ Finally, run `npm run build` to compile the theme

[blursolo]

I think this is because Filament Curator automatically assigns different classes when implementing a custom media resource, so .fi-resource-media becomes .fi-resource-custom-media.

The styles in vendor/awcodes/filament-curator/resources/dist/curator.css do not take this change into account and are hard-wired to .fi-resource-media.

As a workaround, try pasting the following styles into your custom theme css:

.fi-resource-custom-media .fi-forms-tabs-component-header {
    --tw-bg-opacity: 1;
    background-color: rgba(var(--gray-100), var(--tw-bg-opacity));
}
.fi-resource-custom-media .fi-forms-tabs-component-header:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgba(var(--gray-900), var(--tw-bg-opacity));
}
.fi-resource-custom-media .fi-ta .fi-ta-record:has([type="checkbox"]:checked) {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(var(--primary-500), var(--tw-ring-opacity));
}
.fi-resource-custom-media .fi-ta .fi-ta-record:not(:has([type="checkbox"])) .fi-ta-actions {
    margin-top: 56.25%;
}
.fi-resource-custom-media .fi-ta .fi-ta-record:has(.curator-grid-column) {
    display: block;
}
.fi-resource-custom-media .fi-ta .fi-ta-record:has(.curator-grid-column) > div {
    flex-direction: column;
    padding: 0;
}
.fi-resource-custom-media .fi-ta .fi-ta-record:has(.curator-grid-column) > div > div {
    padding: 0;
}
.fi-resource-custom-media .fi-ta .fi-ta-record:has(.curator-grid-column) label {
    aspect-ratio: 16/9;
    height: auto;
    width: 100%;
    z-index: 1;
}
.fi-resource-custom-media .fi-ta .fi-ta-record:has(.curator-grid-column) [type="checkbox"]:not(:checked) {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.fi-resource-custom-media .fi-ta .fi-ta-record:has(.curator-grid-column) [type="checkbox"]:not(:checked):is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgba(var(--gray-800), var(--tw-bg-opacity));
}
.fi-resource-custom-media .fi-ta .fi-ta-record:has(.curator-grid-column) .fi-ta-actions {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-bottom: 0.75rem;
}

[afsharmn]

I think this is because Filament Curator automatically assigns different classes when implementing a custom media resource, so .fi-resource-media becomes .fi-resource-custom-media.

The styles in vendor/awcodes/filament-curator/resources/dist/curator.css do not take this change into account and are hard-wired to .fi-resource-media.

As a workaround, try pasting the following styles into your custom theme css:

.fi-resource-custom-media .fi-forms-tabs-component-header {
    --tw-bg-opacity: 1;
    background-color: rgba(var(--gray-100), var(--tw-bg-opacity));
}
.fi-resource-custom-media .fi-forms-tabs-component-header:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgba(var(--gray-900), var(--tw-bg-opacity));
}
.fi-resource-custom-media .fi-ta .fi-ta-record:has([type="checkbox"]:checked) {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(var(--primary-500), var(--tw-ring-opacity));
}
.fi-resource-custom-media .fi-ta .fi-ta-record:not(:has([type="checkbox"])) .fi-ta-actions {
    margin-top: 56.25%;
}
.fi-resource-custom-media .fi-ta .fi-ta-record:has(.curator-grid-column) {
    display: block;
}
.fi-resource-custom-media .fi-ta .fi-ta-record:has(.curator-grid-column) > div {
    flex-direction: column;
    padding: 0;
}
.fi-resource-custom-media .fi-ta .fi-ta-record:has(.curator-grid-column) > div > div {
    padding: 0;
}
.fi-resource-custom-media .fi-ta .fi-ta-record:has(.curator-grid-column) label {
    aspect-ratio: 16/9;
    height: auto;
    width: 100%;
    z-index: 1;
}
.fi-resource-custom-media .fi-ta .fi-ta-record:has(.curator-grid-column) [type="checkbox"]:not(:checked) {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.fi-resource-custom-media .fi-ta .fi-ta-record:has(.curator-grid-column) [type="checkbox"]:not(:checked):is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgba(var(--gray-800), var(--tw-bg-opacity));
}
.fi-resource-custom-media .fi-ta .fi-ta-record:has(.curator-grid-column) .fi-ta-actions {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-bottom: 0.75rem;
}

It's not just about style.
Items cannot be selected with an extended MediaResource.

[blursolo]

That I can not confirm. It works for me.

[afsharmn]

That I can not confirm. It works for me.

yes its working . thank you.

i put the styles into my custom theme and it is working now .

but it is still a bug , isn't it ? :)