Improve explorer styling

AI Chat Explorer section the background color is changed with the theme color.

I have attached the changes which I have maid to fixed the issue.

It is incorrect code change on multiple levels...

Changing status based upon #7.

True.
I took a looked at the MR and I didn't find anything off there.

Yes, you are from the same company :-)

Its bad if its looks so bad on Gin Dark, I pushed to my changes to dev directly,

Results for the two most used admin themes:
https://www.drupal.org/files/issues/2024-07-19/gin-dark.jpg → (Gin Dark)
https://www.drupal.org/files/issues/2024-07-19/gin-light.jpg → (Gin Light)
https://www.drupal.org/files/issues/2024-07-19/claro.jpg → (Claro).

You can check on 1.0.x-dev release. Please set to fixed if it looks ok in Gin Dark.

Thanks, colors are ok now, but not layout.
Previously I experimented with various gin settings and as result got explorer layout completely broken, and which is still is.
Will explore what caused it and if additional fix is needed.

Gin has a new setting:

Enable sticky action buttons [Beta] [New]
Displays all actions of the form in the sticky header.

Enabling it, layout gets broken (only 1 column left, all on top of each other).
I could disable this setting at the time when using the explorer. But otherwise, I was quite enjoying this feature. Sticky buttons always at the top are quite convenient and quick to access.

I just tested how "aichat" form works with admin theme and this setting. Button is at the right place is supposed to be - at the bottom. Probably because button is defined this way:

    $form['send'] = [
      '#name' => 'send',
      '#type' => 'submit',
      '#value' => $this->t('Send'),
      '#ajax' => $ajax,
      '#access' => $this->isChatEnabled()
    ];

While explorer button is defined this way:

    $form['actions']['submit'] = [
      '#type' => 'submit',
      '#value' => $this->t('Ask The AI'),
      '#attributes' => [
        'data-response' => 'ai-text-response',
      ],
      '#suffix' => '</div>',
    ];

Maybe explorer button could remain the same, because it may also be convenient for botton to be sticky and always at the top easy to reach.

I did not explore to details, but the problem could be that explorer layout does not follow Drupal conventions, and so is susceptible to brake for one reason or another... If Drupal conventions cannot be found for it (admin theme probably does not have columns), so some other strengthening needs to be done for it to be more resistant to braking.

At quick glance, this looks weird :-)

'#suffix' => '</div>',

@SirClickalot is experiencing the same issue as described here 🐛 AI Explorer unusable with the Gin admin theme Closed: duplicate

This is obviiously an issue since you are two people reporting it, but I have tried every combination of settings in Gin and can't get it to break. I've tried Chrome, Firefox and Safari. Could you perhaps send a gin.settings.yml and the gin version and I will see if I can replicate it?

I found another bug while doing it, that is that enabling the sticky button creates a second button that fails when you are using it, because the Explorer takes over sending the request for streaming reasons. That is however a secondary issue to what you guys are seeing.

Vincenzo has been working on fixing the styling issue in general, the one I did looked fugly anyhow. I'm not sure how far he came on that, but that would hopefully fix the issue.

NVM, I could replicate it by upgrading rc11 to rc13. Will have a look!

The CSS issue is fixed and was splitting up ending the column in the button, to its own form element.

However the solution from Gin is not super, since it move the button using JS, rather then CSS. In this case it meant it overwrote the functionality that is written specifically to stream chat messages and it all failed. My only solution for now, is to move out of the actions column which suck, since that would make it be consiquential how it works in many admin themes. However Gin is nr #2 after Claro, so we have to adapt.

Try now on 1.0.x-dev and see.

Marcus_Johansson → closed merge request !9