From b4687811ac6ace0571f98dc2794d3fc30bc228ed Mon Sep 17 00:00:00 2001
From: mateusz-winiarczyk <mateusz.winiarczyk@appunite.com>
Date: Thu, 4 Apr 2024 19:21:52 +0200
Subject: [PATCH] fix(plugin): plugin div container height (MIN-310)
---
.../PluginsDrawer/PluginContent/PluginContent.component.tsx | 2 +-
.../PluginHeaderInfo/PluginHeaderInfo.component.tsx | 4 +++-
.../PluginsDrawer/PluginsHeader/PluginsHeader.component.tsx | 2 +-
.../Map/PluginsDrawer/PluginsTabs/PluginsTabs.component.tsx | 2 +-
4 files changed, 6 insertions(+), 4 deletions(-)
diff --git a/src/components/Map/PluginsDrawer/PluginContent/PluginContent.component.tsx b/src/components/Map/PluginsDrawer/PluginContent/PluginContent.component.tsx
index 732577d8..c335cc6f 100644
--- a/src/components/Map/PluginsDrawer/PluginContent/PluginContent.component.tsx
+++ b/src/components/Map/PluginsDrawer/PluginContent/PluginContent.component.tsx
@@ -16,7 +16,7 @@ export const PluginContent = (): JSX.Element => {
<div
id={PLUGINS_CONTENT_ELEMENT_ID}
data-testid="drawer-plugins-content"
- className="h-full"
+ className="h-[calc(100%-166px)] max-h-[calc(100%-166px)] overflow-y-auto"
/>
</>
);
diff --git a/src/components/Map/PluginsDrawer/PluginsHeader/PluginHeaderInfo/PluginHeaderInfo.component.tsx b/src/components/Map/PluginsDrawer/PluginsHeader/PluginHeaderInfo/PluginHeaderInfo.component.tsx
index 43844ab0..7e5df8a4 100644
--- a/src/components/Map/PluginsDrawer/PluginsHeader/PluginHeaderInfo/PluginHeaderInfo.component.tsx
+++ b/src/components/Map/PluginsDrawer/PluginsHeader/PluginHeaderInfo/PluginHeaderInfo.component.tsx
@@ -23,7 +23,9 @@ export const PluginHeaderInfo = ({ plugin }: Props): JSX.Element => {
return (
<>
- Plugin: <b>{plugin.name}</b>
+ <p className="truncate">
+ Plugin: <b title={plugin.name}>{plugin.name}</b>
+ </p>
<button type="button" onClick={reloadPlugin} role={RELOAD_PLUGIN_DRAWER_BUTTON_ROLE}>
<Icon name="reload" />
</button>
diff --git a/src/components/Map/PluginsDrawer/PluginsHeader/PluginsHeader.component.tsx b/src/components/Map/PluginsDrawer/PluginsHeader/PluginsHeader.component.tsx
index b8706250..6e82f8ef 100644
--- a/src/components/Map/PluginsDrawer/PluginsHeader/PluginsHeader.component.tsx
+++ b/src/components/Map/PluginsDrawer/PluginsHeader/PluginsHeader.component.tsx
@@ -21,7 +21,7 @@ export const PluginsHeader = (): JSX.Element => {
data-testid="drawer-plugins-header"
>
<div className="flex w-full justify-between">
- <div className="flex items-center gap-2 text-xl">
+ <div className="flex max-w-[90%] items-center gap-2 text-xl">
{currentPlugin ? <PluginHeaderInfo plugin={currentPlugin} /> : <>No plugin selected</>}
</div>
<IconButton
diff --git a/src/components/Map/PluginsDrawer/PluginsTabs/PluginsTabs.component.tsx b/src/components/Map/PluginsDrawer/PluginsTabs/PluginsTabs.component.tsx
index 0ed9089e..90e8f679 100644
--- a/src/components/Map/PluginsDrawer/PluginsTabs/PluginsTabs.component.tsx
+++ b/src/components/Map/PluginsDrawer/PluginsTabs/PluginsTabs.component.tsx
@@ -24,7 +24,7 @@ export const PluginsTabs = (): JSX.Element => {
return (
<div
- className="flex h-10 w-full flex-row flex-nowrap justify-start border-b border-b-divide bg-white-pearl text-xs"
+ className="flex w-full flex-row flex-nowrap justify-start overflow-x-auto overflow-y-clip border-b border-b-divide bg-white-pearl text-xs"
data-testid="drawer-plugins-tab"
>
{isPluginsEmpty ? pluginsEmptyInfo : pluginsTabs}
--
GitLab