fix(issues): resolve column styling problems in top issues (#103946)

cvxluo · web-flow · commit 075a96b92dea · 2025-11-24T16:19:17.000-08:00
The description of a cluster used to be hidden on a Disclosure on the
title of the cluster, but that was a ton of trouble — change it to a
"view summary" button. Also fix some issues causing us to sometimes only
have 1 column
diff --git a/static/app/views/issueList/pages/dynamicGrouping.tsx b/static/app/views/issueList/pages/dynamicGrouping.tsx
@@ -102,7 +102,6 @@ function CompactIssuePreview({group}: {group: Group}) {
 
 function ClusterIssues({groupIds}: {groupIds: number[]}) {
   const organization = useOrganization();
-
   const previewGroupIds = groupIds.slice(0, 3);
 
   const {data: groups, isPending} = useApiQuery<Group[]>(
@@ -120,11 +119,7 @@ function ClusterIssues({groupIds}: {groupIds: number[]}) {
     }
   );
 
-  if (isPending) {
-    return <LoadingIndicator size={24} />;
-  }
-
-  if (!groups || groups.length === 0) {
+  if (isPending || !groups || groups.length === 0) {
     return null;
   }
 
@@ -151,33 +146,27 @@ function ClusterCard({
 }) {
   const organization = useOrganization();
   const issueCount = cluster.group_ids.length;
+  const [showDescription, setShowDescription] = useState(false);
 
   return (
     <CardContainer>
-      <Flex
-        justify="between"
-        align="start"
-        gap="md"
-        paddingBottom="md"
-        borderBottom="primary"
-      >
-        <Disclosure>
-          <Disclosure.Title>
-            <Heading as="h3" size="md" style={{wordBreak: 'break-word'}}>
-              {cluster.title}
-            </Heading>
-          </Disclosure.Title>
-          <Disclosure.Content>
-            <Text as="p" variant="muted" style={{marginBottom: space(1.5)}}>
-              {cluster.description}
-            </Text>
-            {cluster.fixability_score !== null && (
-              <Text size="sm" variant="muted">
-                {t('%s%% confidence', Math.round(cluster.fixability_score * 100))}
-              </Text>
-            )}
-          </Disclosure.Content>
-        </Disclosure>
+      <Flex justify="between" align="start" gap="md" paddingBottom="md">
+        <Flex direction="column" gap="xs" style={{flex: 1, minWidth: 0}}>
+          <Heading as="h3" size="md" style={{wordBreak: 'break-word'}}>
+            {cluster.title}
+          </Heading>
+          {cluster.description && (
+            <Fragment>
+              {showDescription ? (
+                <DescriptionText>{cluster.description}</DescriptionText>
+              ) : (
+                <ReadMoreButton onClick={() => setShowDescription(true)}>
+                  {t('View summary')}
+                </ReadMoreButton>
+              )}
+            </Fragment>
+          )}
+        </Flex>
         <IssueCountBadge>
           <IssueCountNumber>{issueCount}</IssueCountNumber>
           <Text size="xs" variant="muted" uppercase>
@@ -264,119 +253,142 @@ function DynamicGrouping() {
   }
 
   return (
-    <Container padding="lg" maxWidth="1600px" margin="0 auto">
-      <Breadcrumbs
-        crumbs={[
-          {
-            label: t('Issues'),
-            to: `/organizations/${organization.slug}/issues/`,
-          },
-          {
-            label: t('Top Issues'),
-          },
-        ]}
-      />
-
-      <Heading as="h1" style={{marginBottom: space(2)}}>
-        {t('Top Issues')}
-      </Heading>
-
-      {isPending ? (
-        <LoadingIndicator />
-      ) : (
-        <Fragment>
-          <Text size="sm" variant="muted">
-            {tn(
-              'Viewing %s issue in %s cluster',
-              'Viewing %s issues across %s clusters',
-              totalIssues,
-              filteredAndSortedClusters.length
-            )}
-          </Text>
+    <PageWrapper>
+      <HeaderSection>
+        <Breadcrumbs
+          crumbs={[
+            {
+              label: t('Issues'),
+              to: `/organizations/${organization.slug}/issues/`,
+            },
+            {
+              label: t('Top Issues'),
+            },
+          ]}
+        />
+
+        <Heading as="h1" style={{marginBottom: space(2)}}>
+          {t('Top Issues')}
+        </Heading>
+
+        {isPending ? null : (
+          <Fragment>
+            <Text size="sm" variant="muted">
+              {tn(
+                'Viewing %s issue in %s cluster',
+                'Viewing %s issues across %s clusters',
+                totalIssues,
+                filteredAndSortedClusters.length
+              )}
+            </Text>
 
-          <Container
-            padding="sm"
-            border="primary"
-            radius="md"
-            background="primary"
-            marginTop="md"
-            marginBottom="lg"
-          >
-            <Disclosure>
-              <Disclosure.Title>
-                <Text size="sm" bold>
-                  {t('More Filters')}
-                </Text>
-              </Disclosure.Title>
-              <Disclosure.Content>
-                <Flex direction="column" gap="md" paddingTop="md">
-                  <Flex gap="sm" align="center">
-                    <Checkbox
-                      checked={filterByAssignedToMe}
-                      onChange={e => setFilterByAssignedToMe(e.target.checked)}
-                      aria-label={t('Show only issues assigned to me')}
-                      size="sm"
-                    />
-                    <Text size="sm" variant="muted">
-                      {t('Only show issues assigned to me')}
-                    </Text>
-                  </Flex>
-                  <Flex gap="sm" align="center">
-                    <Text size="sm" variant="muted">
-                      {t('Minimum fixability score (%)')}
-                    </Text>
-                    <NumberInput
-                      min={0}
-                      max={100}
-                      value={minFixabilityScore}
-                      onChange={value => setMinFixabilityScore(value ?? 0)}
-                      aria-label={t('Minimum fixability score')}
-                      size="sm"
-                    />
+            <Container
+              padding="sm"
+              border="primary"
+              radius="md"
+              background="primary"
+              marginTop="md"
+            >
+              <Disclosure>
+                <Disclosure.Title>
+                  <Text size="sm" bold>
+                    {t('More Filters')}
+                  </Text>
+                </Disclosure.Title>
+                <Disclosure.Content>
+                  <Flex direction="column" gap="md" paddingTop="md">
+                    <Flex gap="sm" align="center">
+                      <Checkbox
+                        checked={filterByAssignedToMe}
+                        onChange={e => setFilterByAssignedToMe(e.target.checked)}
+                        aria-label={t('Show only issues assigned to me')}
+                        size="sm"
+                      />
+                      <Text size="sm" variant="muted">
+                        {t('Only show issues assigned to me')}
+                      </Text>
+                    </Flex>
+                    <Flex gap="sm" align="center">
+                      <Text size="sm" variant="muted">
+                        {t('Minimum fixability score (%)')}
+                      </Text>
+                      <NumberInput
+                        min={0}
+                        max={100}
+                        value={minFixabilityScore}
+                        onChange={value => setMinFixabilityScore(value ?? 0)}
+                        aria-label={t('Minimum fixability score')}
+                        size="sm"
+                      />
+                    </Flex>
                   </Flex>
-                </Flex>
-              </Disclosure.Content>
-            </Disclosure>
-          </Container>
-
-          {filteredAndSortedClusters.length === 0 ? (
-            <Container padding="lg" border="primary" radius="md" background="primary">
-              <Text variant="muted" align="center" as="div">
-                {t('No clusters match the current filters')}
-              </Text>
+                </Disclosure.Content>
+              </Disclosure>
             </Container>
-          ) : (
-            <CardsGrid>
-              {filteredAndSortedClusters.map(cluster => (
-                <ClusterCard
-                  key={cluster.cluster_id}
-                  cluster={cluster}
-                  onRemove={handleRemoveCluster}
-                />
-              ))}
-            </CardsGrid>
-          )}
-        </Fragment>
-      )}
-    </Container>
+          </Fragment>
+        )}
+      </HeaderSection>
+
+      <CardsSection>
+        {isPending ? (
+          <LoadingIndicator />
+        ) : filteredAndSortedClusters.length === 0 ? (
+          <Container padding="lg" border="primary" radius="md" background="primary">
+            <Text variant="muted" align="center" as="div">
+              {t('No clusters match the current filters')}
+            </Text>
+          </Container>
+        ) : (
+          <CardsGrid>
+            {filteredAndSortedClusters.map(cluster => (
+              <ClusterCard
+                key={cluster.cluster_id}
+                cluster={cluster}
+                onRemove={handleRemoveCluster}
+              />
+            ))}
+          </CardsGrid>
+        )}
+      </CardsSection>
+    </PageWrapper>
   );
 }
 
-// Grid layout for cards - needs CSS grid
+const PageWrapper = styled('div')`
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+`;
+
+const HeaderSection = styled('div')`
+  padding: ${space(4)} ${space(4)} ${space(3)};
+`;
+
+const CardsSection = styled('div')`
+  flex: 1;
+  padding: ${space(2)} ${space(4)} ${space(4)};
+`;
+
 const CardsGrid = styled('div')`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+  grid-template-columns: repeat(2, 1fr);
   gap: ${space(3)};
+  align-items: start;
+
+  @media (max-width: ${p => p.theme.breakpoints.lg}) {
+    grid-template-columns: 1fr;
+  }
 `;
 
-// Card with hover effect - needs custom transition/hover styles
+// Card with hover effect
 const CardContainer = styled('div')`
   background: ${p => p.theme.background};
   border: 1px solid ${p => p.theme.border};
   border-radius: ${p => p.theme.borderRadius};
   padding: ${space(3)};
   display: flex;
   flex-direction: column;
+  min-width: 0;
   transition:
     border-color 0.2s ease,
     box-shadow 0.2s ease;
@@ -405,7 +417,7 @@ const IssueCountNumber = styled('div')`
   line-height: 1;
 `;
 
-// Issue preview link with hover transform effect
+// Issue preview link with hover effect
 const IssuePreviewLink = styled(Link)`
   display: block;
   padding: ${space(1.5)} ${space(2)};
@@ -414,13 +426,11 @@ const IssuePreviewLink = styled(Link)`
   border-radius: ${p => p.theme.borderRadius};
   transition:
     border-color 0.15s ease,
-    background 0.15s ease,
-    transform 0.15s ease;
+    background 0.15s ease;
 
   &:hover {
     border-color: ${p => p.theme.purple300};
     background: ${p => p.theme.backgroundElevated};
-    transform: translateX(2px);
   }
 `;
 
@@ -454,4 +464,26 @@ const MetaSeparator = styled('div')`
   background-color: ${p => p.theme.innerBorder};
 `;
 
+const ReadMoreButton = styled('button')`
+  background: none;
+  border: none;
+  padding: 0;
+  font-size: ${p => p.theme.fontSize.sm};
+  color: ${p => p.theme.subText};
+  cursor: pointer;
+  text-align: left;
+
+  &:hover {
+    color: ${p => p.theme.textColor};
+    text-decoration: underline;
+  }
+`;
+
+const DescriptionText = styled('p')`
+  margin: 0;
+  font-size: ${p => p.theme.fontSize.sm};
+  color: ${p => p.theme.subText};
+  line-height: 1.5;
+`;
+
 export default DynamicGrouping;
