fix: responsiveness problems

raaymax · Nov 2, 2024 · 7bf7dd5 · 7bf7dd5
1 parent bc2635d
commit 7bf7dd5
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 11 deletions.
diff --git a/app/src/js/components/layout/Main.tsx b/app/src/js/components/layout/Main.tsx
@@ -13,7 +13,10 @@ import { NavButton } from '../molecules/NavButton';
 import { logout } from '../../services/session';
 import { useParams } from 'react-router-dom';
 import { useThemeControl } from '../contexts/useThemeControl';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+const WORKSPACES_WIDTH = 80;
+const RESIZER_WIDTH = 8;
 
 export const Container = styled.div`
   display: flex;
@@ -26,7 +29,7 @@ export const Container = styled.div`
 
   .resizer {
     position: relative;
-    flex: 0 0 8px;
+    flex: 0 0 ${RESIZER_WIDTH}px;
     cursor: ew-resize;
     background-color: ${(props) => props.theme.Channels.Container};
     border-right: 0;
@@ -54,7 +57,7 @@ export const Container = styled.div`
   }
 
   .workspaces {
-    flex: 0 0 80px;
+    flex: 0 0 ${WORKSPACES_WIDTH}px;
     display: flex;
     flex-direction: column;
     gap: 12px;
@@ -227,17 +230,23 @@ export const Desktop = ({children}: {children: React.ReactNode}) => {
     document.querySelector('meta[name="theme-color"]')
       ?.setAttribute('content', theme.Navbar.Background);
   }, [theme]);
-
+  console.log(size, WORKSPACES_WIDTH, RESIZER_WIDTH)
+  const sideSize = useMemo(() => {
+    return size + WORKSPACES_WIDTH + RESIZER_WIDTH;
+  }, [size]);
   return (
     <Container className={cn({
       'side-stream': Boolean(parentId),
       'sidebar-open': sidebar,
       'sidebar-closed': !sidebar
     })}>
       <Workspaces />
-      {sidebar && <Sidebar style={{flex: `0 0 ${size}px`}} />}
+      {sidebar && <Sidebar style={{flex: `0 0 ${size}px`, maxWidth: `${size}px`}} />}
       <Resizer value={size} onChange={setSize} />
-      <div className={cn('main-view')}>
+      <div className={cn('main-view')} style={{
+        flex: `0 1 calc(100vw - ${sideSize}px)`,
+        maxWidth: `calc(100vw - ${sideSize}px)`
+      }}>
         {children}
       </div>
     </Container>

diff --git a/app/src/js/components/molecules/NavChannel.tsx b/app/src/js/components/molecules/NavChannel.tsx
@@ -7,6 +7,13 @@ import { cn, ClassNames } from '../../utils';
 
 const Container = styled.div`
   cursor: pointer;
+  overflow: hidden;
+  .text-with-icon {
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
   &.active {
     background-color: var(--primary_active_mask);
   }
@@ -39,7 +46,7 @@ type InlineChannelProps = {
 export const InlineChannel = ({
   id, children, badge, className, onClick, icon = 'fa-solid fa-hashtag',
 }: InlineChannelProps) => (
-  <Container className={cn('channel', className)} data-id={id} onClick={onClick}>
+  <Container className={cn('channel', 'inline-channel', className)} data-id={id} onClick={onClick}>
     <TextWithIcon icon={icon}>{children}</TextWithIcon>
     {(badge && badge > 0) ? <Badge>{badge}</Badge> : null}
   </Container>

diff --git a/app/src/js/components/molecules/TextWithIcon.tsx b/app/src/js/components/molecules/TextWithIcon.tsx
@@ -7,7 +7,7 @@ import { cn, ClassNames } from '../../utils';
 const Container = styled.div`
   display: inline-block;
  .text {
-   padding: 0px 10px; 
+    padding: 0px 10px; 
   }
 `;
 
@@ -23,7 +23,7 @@ export const TextWithIcon = ({
 }: TextWithIconProps) => {
   const $size = useSize(size);
   return (
-    <Container className={cn(className)}>
+    <Container className={cn('text-with-icon', className)}>
       <Icon icon={icon} size={$size ? $size / 2.3 : $size} />
       <Text size={$size ? $size / 2.3 : $size}>{children}</Text>
     </Container>

diff --git a/app/src/js/components/organisms/Message.tsx b/app/src/js/components/organisms/Message.tsx
@@ -38,7 +38,6 @@ const MessageContainer = styled.div`
   padding: 8px 16px 4px 16px;
   line-height: 24px;
   vertical-align: middle;
-  min-width: 400px;
 
   &.short {
     padding-left: 0px;

diff --git a/app/src/js/components/pages/Discussion.tsx b/app/src/js/components/pages/Discussion.tsx
@@ -36,7 +36,6 @@ const StyledHeader = styled.div`
   }
 
   & .channel{
-    flex: 1;
     padding-left: 30px;
     vertical-align: middle;
     font-size: 20px;
@@ -49,6 +48,7 @@ const StyledHeader = styled.div`
     padding-left: 10px;
   }
   & .toolbar {
+    max-width: 100%;
     flex: 1;
     flex-align: right;
     display:flex;