fix: doc service webpage sidebar should limit to 40% window width (#5839

)

Motivation:

- Some service/struct names can be too long and cause app to look weird.

#5091 (comment)

Modifications:

- Make texts in sidebar wrap.
- Limit sidebar to occupy at most 40% of the window width.

Result:

Wrapping example:

<img width="1052" alt="image"
src="https://github.com/user-attachments/assets/e7e68c67-e05e-4084-9dec-ecabad2424ef">


![image](https://github.com/user-attachments/assets/5ca1186a-e4c1-474e-a4fb-6a2b38f1c9a5)

docs-client/src/containers/App/index.tsx

@@ -86,6 +86,7 @@ const useStyles = makeStyles((theme: Theme) =>
         width: '80%',
       },
       height: '100vh',
+      maxWidth: '40vw',
       overflowY: 'auto',
     },
     content: {
@@ -250,6 +251,9 @@ const AppDrawer: React.FunctionComponent<AppDrawerProps> = ({
                           <ListItemText
                             primaryTypographyProps={{
                               variant: 'body2',
+                              style: {
+                                wordBreak: 'break-all',
+                              },
                             }}
                           >
                             <code>{`${method.name}()`}</code>
@@ -259,6 +263,9 @@ const AppDrawer: React.FunctionComponent<AppDrawerProps> = ({
                               key={`${endpoint.pathMapping}`}
                               primaryTypographyProps={{
                                 variant: 'caption',
+                                style: {
+                                  wordBreak: 'break-all',
+                                },
                               }}
                             >
                               {endpoint.pathMapping}
@@ -294,6 +301,9 @@ const AppDrawer: React.FunctionComponent<AppDrawerProps> = ({
                   inset
                   primaryTypographyProps={{
                     variant: 'body2',
+                    style: {
+                      wordBreak: 'break-all',
+                    },
                   }}
                 >
                   {specification.hasUniqueEnumNames() ? (
@@ -329,6 +339,9 @@ const AppDrawer: React.FunctionComponent<AppDrawerProps> = ({
                   inset
                   primaryTypographyProps={{
                     variant: 'body2',
+                    style: {
+                      wordBreak: 'break-all',
+                    },
                   }}
                 >
                   {specification.hasUniqueStructNames() ? (
@@ -364,6 +377,9 @@ const AppDrawer: React.FunctionComponent<AppDrawerProps> = ({
                   inset
                   primaryTypographyProps={{
                     variant: 'body2',
+                    style: {
+                      wordBreak: 'break-all',
+                    },
                   }}
                 >
                   {specification.hasUniqueStructNames() ? (