From fe820c3e189c005d28ff6625b8d2ebe1a3bfdf09 Mon Sep 17 00:00:00 2001
From: Anderson Shindy Oki <anderson.vs.oki@gmail.com>
Date: Fri, 5 Jul 2024 11:14:56 +0900
Subject: [PATCH 1/2] Fixed overview poster wrap

---
 frontend/src/pages/views/ItemOverview.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/views/ItemOverview.tsx b/frontend/src/pages/views/ItemOverview.tsx
index a2debdc57..e662a7183 100644
--- a/frontend/src/pages/views/ItemOverview.tsx
+++ b/frontend/src/pages/views/ItemOverview.tsx
@@ -129,7 +129,9 @@ const ItemOverview: FunctionComponent<Props> = (props) => {
         m={0}
         style={{
           backgroundColor: "rgba(0,0,0,0.7)",
-          flexWrap: "nowrap",
+        }}
+        styles={{
+          inner: { flexWrap: "nowrap" },
         }}
       >
         <Grid.Col span={3} visibleFrom="sm">

From e522d8b1961da51ff81c1eb3f3bae0110cdfd94f Mon Sep 17 00:00:00 2001
From: Anderson Shindy Oki <anderson.vs.oki@gmail.com>
Date: Fri, 5 Jul 2024 13:43:26 +0900
Subject: [PATCH 2/2] fix: overflow wrapping

---
 frontend/src/pages/views/ItemOverview.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/views/ItemOverview.tsx b/frontend/src/pages/views/ItemOverview.tsx
index e662a7183..15b43aab1 100644
--- a/frontend/src/pages/views/ItemOverview.tsx
+++ b/frontend/src/pages/views/ItemOverview.tsx
@@ -1,4 +1,4 @@
-import { FunctionComponent, useMemo } from "react";
+import React, { FunctionComponent, useMemo } from "react";
 import {
   BackgroundImage,
   Badge,
@@ -12,6 +12,7 @@ import {
   Stack,
   Text,
   Title,
+  Tooltip,
 } from "@mantine/core";
 import {
   faBookmark as farBookmark,
@@ -43,12 +44,18 @@ const ItemOverview: FunctionComponent<Props> = (props) => {
   const { item, details } = props;
 
   const detailBadges = useMemo(() => {
-    const badges: (JSX.Element | null)[] = [];
+    const badges: (React.JSX.Element | null)[] = [];
 
     if (item) {
       badges.push(
         <ItemBadge key="file-path" icon={faFolder} title="File Path">
-          {item.path}
+          <Tooltip
+            label={item.path}
+            multiline
+            style={{ overflowWrap: "anywhere" }}
+          >
+            <span>{item.path}</span>
+          </Tooltip>
         </ItemBadge>,
       );
 
@@ -90,7 +97,7 @@ const ItemOverview: FunctionComponent<Props> = (props) => {
   const profileItems = useProfileItemsToLanguages(profile);
 
   const languageBadges = useMemo(() => {
-    const badges: (JSX.Element | null)[] = [];
+    const badges: (React.JSX.Element | null)[] = [];
 
     if (profile) {
       badges.push(
@@ -142,7 +149,7 @@ const ItemOverview: FunctionComponent<Props> = (props) => {
             fallbackSrc="https://placehold.co/250x250?text=Placeholder"
           ></Image>
         </Grid.Col>
-        <Grid.Col span={8} maw="100%">
+        <Grid.Col span={8} maw="100%" style={{ overflow: "hidden" }}>
           <Stack align="flex-start" gap="xs" mx={6}>
             <Group align="flex-start" wrap="nowrap" maw="100%">
               <Title my={0}>