Wrap long stable ids in transcript list and protein list view (#1130)

Ensembl · May 15, 2024 · 18aa31f · 18aa31f
1 parent 3e68e2e
commit 18aa31f
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 6 deletions.
diff --git a/...ts/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.module.css b/...ts/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.module.css
@@ -69,6 +69,10 @@
   font-weight: var(--font-weight-normal);
 }
 
+.wrapText {
+  word-wrap: break-word;
+}
+
 .moreInformation {
   grid-area: moreInformation;
   display: grid;

diff --git a/...omponents/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.tsx b/...omponents/default-transcripts-list/transcripts-list-item-info/TranscriptsListItemInfo.tsx
@@ -200,7 +200,7 @@ export const TranscriptsListItemInfo = (
       </>
     );
   };
-
+  const proteinIdClasses = classNames(styles.normalText, styles.wrapText);
   const product = transcript.product_generating_contexts[0].product;
   return (
     <div className={mainStyles}>
@@ -221,7 +221,7 @@ export const TranscriptsListItemInfo = (
               <div className={styles.normalText} data-test-id="proteinLength">
                 {aminoAcidLength} aa
               </div>
-              <div className={styles.normalText}>
+              <div className={proteinIdClasses}>
                 {product && getLinkToProteinView(product?.stable_id)}
               </div>
             </>

diff --git a/...t/app/entity-viewer/gene-view/components/gene-overview-image/GeneOverviewImage.module.css b/...t/app/entity-viewer/gene-view/components/gene-overview-image/GeneOverviewImage.module.css
@@ -28,6 +28,7 @@
   text-align: right;
   font-size: 13px;
   font-weight: var(--font-weight-bold);
+  word-break: break-all;
 }
 
 .directionIndicator {

diff --git a/...-viewer/gene-view/components/proteins-list/proteins-list-item/ProteinsListItem.module.css b/...-viewer/gene-view/components/proteins-list/proteins-list-item/ProteinsListItem.module.css
@@ -2,12 +2,11 @@
   scroll-margin-top: 90px;
 }
 
-
 .middle {
   cursor: pointer;
   display: grid;
-  grid-template-columns: 75px 450px 150px;
-  grid-column-gap: 10px;
+  grid-template-columns: 10% 43% 43%;
+  grid-column-gap: 2%;
 }
 
 .transcriptId {
@@ -19,3 +18,10 @@
 .transcriptId {
   font-weight: var(--font-weight-normal);
 }
+
+.productStableId {
+  word-wrap: break-word;
+  justify-self: end;
+  word-break: break-word;
+  text-align: right;
+}
diff --git a/.../entity-viewer/gene-view/components/proteins-list/proteins-list-item/ProteinsListItem.tsx b/.../entity-viewer/gene-view/components/proteins-list/proteins-list-item/ProteinsListItem.tsx
@@ -123,7 +123,7 @@ const ProteinsListItem = (props: Props) => {
         <div onClick={toggleListItemInfo} className={midStyles}>
           <div>{getProductAminoAcidLength(transcript)} aa</div>
           <div>{getProteinDescription()}</div>
-          <div>{product?.stable_id}</div>
+          <div className={styles.productStableId}>{product?.stable_id}</div>
         </div>
         <div
           className={transcriptsListStyles.right}