From 0a50bbc9ef8c070aeb5dea83ef14fa60e721e1e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B4mulo=20Penido?= <romulo@opencraft.com>
Date: Tue, 2 Apr 2024 04:10:14 -0300
Subject: [PATCH] fix: content tags drawer width (#910)

---
 src/content-tags-drawer/ContentTagsDrawer.jsx  | 2 +-
 src/content-tags-drawer/ContentTagsDrawer.scss | 9 +++++++++
 src/content-tags-drawer/index.scss             | 1 +
 3 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 src/content-tags-drawer/ContentTagsDrawer.scss

diff --git a/src/content-tags-drawer/ContentTagsDrawer.jsx b/src/content-tags-drawer/ContentTagsDrawer.jsx
index a72f6a839..f81ac351b 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawer.jsx
@@ -133,7 +133,7 @@ const ContentTagsDrawer = ({ id, onClose }) => {
 
   return (
 
-    <div className="mt-1">
+    <div id="content-tags-drawer" className="mt-1">
       <Container size="xl">
         <CloseButton onClick={() => onCloseDrawer()} data-testid="drawer-close-button" />
         <span>{intl.formatMessage(messages.headerSubtitle)}</span>
diff --git a/src/content-tags-drawer/ContentTagsDrawer.scss b/src/content-tags-drawer/ContentTagsDrawer.scss
new file mode 100644
index 000000000..1adb2da4b
--- /dev/null
+++ b/src/content-tags-drawer/ContentTagsDrawer.scss
@@ -0,0 +1,9 @@
+.pgn__sheet-component:has(#content-tags-drawer) {
+  min-width: max(500px, 33vw);
+}
+
+@media only screen and (max-width: 500px) {
+  .pgn__sheet-component:has(#content-tags-drawer) {
+    min-width: 100vw;
+  }
+}
diff --git a/src/content-tags-drawer/index.scss b/src/content-tags-drawer/index.scss
index d179bf86a..84d91efb5 100644
--- a/src/content-tags-drawer/index.scss
+++ b/src/content-tags-drawer/index.scss
@@ -1,2 +1,3 @@
 @import "content-tags-drawer/TagBubble";
 @import "content-tags-drawer/tags-sidebar-controls/TagsSidebarControls";
+@import "content-tags-drawer/ContentTagsDrawer";