mobile: fix long tag names overflow and display in tag items (#9950)

* mobile: fix long tag names overflow and display in tag items

Signed-off-by: kashaf-ansari-dev <kashafansari3108@gmail.com>

* mobile: fix long title in side menu

Signed-off-by: kashaf-ansari-dev <kashafansari3108@gmail.com>

* mobile: fix long notebook title display

Signed-off-by: kashaf-ansari-dev <kashafansari3108@gmail.com>

* mobile: prevent tag list overlap on first render

Signed-off-by: kashaf-ansari-dev <kashafansari3108@gmail.com>

---------

Signed-off-by: kashaf-ansari-dev <kashafansari3108@gmail.com>

apps/mobile/app/components/side-menu/menu-item.tsx

@@ -156,7 +156,8 @@ export function MenuItem({
         style={{
           flexDirection: "row",
           alignItems: "center",
-          gap: DefaultAppStyles.GAP_SMALL
+          gap: DefaultAppStyles.GAP_SMALL,
+          flexShrink: 1
         }}
       >
         {renderIcon ? (
@@ -185,6 +186,7 @@ export function MenuItem({
             isFocused ? colors.selected.paragraph : colors.primary.paragraph
           }
           size={AppFontSize.sm}
+          style={{ flexShrink: 1 }}
         >
           {item.title}
         </Paragraph>
@@ -195,6 +197,9 @@ export function MenuItem({
         color={
           isFocused ? colors.primary.paragraph : colors.secondary.paragraph
         }
+        style={{
+          marginLeft: DefaultAppStyles.GAP_SMALL
+        }}
       >
         {menuItemCount}
       </Paragraph>

apps/mobile/app/components/side-menu/notebook-item.tsx

@@ -72,7 +72,7 @@ export const NotebookItem = ({
   const notebook = item.notebook;
   const isFocused = focused;
   const { totalNotes, getTotalNotes } = useTotalNotes("notebook");
-  const updater = useRelationStore(state => state.updater);
+  const updater = useRelationStore((state) => state.updater);
   const getTotalNotesRef = React.useRef(getTotalNotes);
   getTotalNotesRef.current = getTotalNotes;
   const { colors } = useThemeColors();
@@ -101,8 +101,8 @@ export const NotebookItem = ({
           item.depth === 0
             ? undefined
             : item.depth < 6
-            ? 15 * item.depth
-            : 15 * 5,
+              ? 15 * item.depth
+              : 15 * 5,
         width: "100%",
         marginTop: 2,
         opacity: item.disabled ? 0.5 : 1
@@ -162,7 +162,8 @@ export const NotebookItem = ({
         <View
           style={{
             flexDirection: "row",
-            alignItems: "center"
+            alignItems: "center",
+            flexShrink: 1
           }}
         >
           <IconButton
@@ -191,8 +192,8 @@ export const NotebookItem = ({
               !item.hasChildren || disableExpand
                 ? "book-outline"
                 : expanded
-                ? "chevron-down"
-                : "chevron-right"
+                  ? "chevron-down"
+                  : "chevron-right"
             }
           />
 
@@ -201,6 +202,7 @@ export const NotebookItem = ({
               isFocused ? colors.selected.paragraph : colors.primary.paragraph
             }
             size={AppFontSize.sm}
+            style={{ flexShrink: 1 }}
           >
             {notebook?.title}
           </Paragraph>
@@ -211,7 +213,8 @@ export const NotebookItem = ({
             gap: DefaultAppStyles.GAP_SMALL,
             flexDirection: "row",
             alignItems: "center",
-            justifyContent: "center"
+            justifyContent: "center",
+            marginLeft: DefaultAppStyles.GAP_SMALL
           }}
         >
           {selectionEnabled ? (

apps/mobile/app/components/side-menu/side-menu-tags.tsx

@@ -56,7 +56,7 @@ const TagItem = (props: {
   const totalNotes = useTotalNotes("tag");
   const totalNotesRef = React.useRef(totalNotes);
   totalNotesRef.current = totalNotes;
-  const updater = useRelationStore(state => state.updater);
+  const updater = useRelationStore((state) => state.updater);
 
   useEffect(() => {
     if (item?.id) {
@@ -67,6 +67,8 @@ const TagItem = (props: {
   return (
     <View
       style={{
+        minHeight: 35,
+        justifyContent: "center",
         paddingHorizontal: DefaultAppStyles.GAP,
         marginTop:
           (props.id as number) === 0 ? DefaultAppStyles.GAP_VERTICAL : 2
@@ -123,7 +125,8 @@ const TagItem = (props: {
           <View
             style={{
               flexDirection: "row",
-              alignItems: "center"
+              alignItems: "center",
+              flexShrink: 1
             }}
           >
             <View
@@ -146,6 +149,9 @@ const TagItem = (props: {
                 isFocused ? colors.selected.paragraph : colors.primary.paragraph
               }
               size={AppFontSize.sm}
+              style={{
+                flexShrink: 1
+              }}
             >
               {item?.title}
             </Paragraph>
@@ -173,6 +179,9 @@ const TagItem = (props: {
                 <Paragraph
                   size={AppFontSize.xxs}
                   color={colors.secondary.paragraph}
+                  style={{
+                    marginLeft: DefaultAppStyles.GAP_SMALL
+                  }}
                 >
                   {totalNotes.totalNotes(item?.id)}
                 </Paragraph>

apps/mobile/app/screens/manage-tags/index.tsx

@@ -398,7 +398,8 @@ const TagItem = ({
         flexDirection: "row",
         marginVertical: 5,
         justifyContent: "flex-start",
-        height: 40
+        minHeight: 40,
+        alignItems: "center"
       }}
       onPress={() => {
         if (!tag) return;
@@ -438,7 +439,9 @@ const TagItem = ({
         />
       )}
       {tag ? (
-        <Paragraph size={AppFontSize.sm}>{"#" + tag?.title}</Paragraph>
+        <Paragraph style={{ flexShrink: 1 }} size={AppFontSize.sm}>
+          {"#" + tag?.title}
+        </Paragraph>
       ) : (
         <View
           style={{