Align Action header to start of the column in listing pages (#3646)

* refactor: 🎨 Update list table layouts for better space utilization

- Standardize Actions column to use max-width and left-align text,
expand Name columns to 50%, and fix CSS formatting inconsistencies.

* refactor: ♻️ Adjust action column styling across list components

- Remove left padding from SpeedSend actions column - Increase TagList
actions column width from 5% to 10% - Add left padding to TriggerList
actions column for alignment

* Align actions column to left in list views

Author: shijithkjayan

src/containers/Certificates/CertificatesList/CertificateList.module.css

@@ -1,10 +1,15 @@
 .Name {
-    width: 30%;
-    min-width: 200px;
+  width: 50%;
+  min-width: 200px;
+}
+
+.Description {
+  width: 40%;
+  min-width: 200px;
 }
 
 .Actions {
-    text-align: end;
-    margin-left: auto;
-    min-width: 200px;
-}
+  text-align: start;
+  margin-left: auto;
+  max-width: 200px;
+}

src/containers/Certificates/CertificatesList/CertificateList.tsx

@@ -23,7 +23,7 @@ const getDescription = (description?: string) => (
   <>{description ? <p>{description.length < 100 ? description : `${description.slice(0, 100)}...`}</p> : ''}</>
 );
 
-const columnStyles = [styles.Label, styles.Description, styles.Actions];
+const columnStyles = [styles.Name, styles.Description, styles.Actions];
 const certificateIcon = <CertificateIcon className={styles.DarkIcon} />;
 
 export const CertificateList = () => {

src/containers/Collection/CollectionList/CollectionList.module.css

@@ -57,9 +57,10 @@
 }
 
 .Actions {
-  width: 30%;
-  min-width: 200px;
-  text-align: end;
+  width: 5%;
+  min-width: 100px;
+  text-align: start;
+  padding-left: 25px !important;
 }
 
 .ViewButton {

src/containers/Flow/FlowList/FlowList.module.css

@@ -8,7 +8,7 @@
   min-height: 36px !important;
 }
 
-.SearchBar>fieldset {
+.SearchBar > fieldset {
   border: none !important;
 }
 
@@ -31,8 +31,13 @@
 
 .Actions {
   width: 15%;
-  min-width: 200px;
-  text-align: end;
+  max-width: 200px;
+  text-align: start;
+  padding-left: 25px !important;
+}
+
+.Actions > div {
+  justify-content: flex-start !important;
 }
 
 .LabelText {
@@ -173,7 +178,7 @@
   line-height: 1;
 }
 
-.RadioLabel>span {
+.RadioLabel > span {
   line-height: 1 !important;
   font-weight: 500 !important;
   font-size: 16px !important;
@@ -223,4 +228,4 @@
 .AssistantListPlain {
   margin: 4px 0 0;
   padding-left: 18px;
-}
+}

src/containers/HSM/HSMList/HSMList.module.css

@@ -1,180 +1,180 @@
 .Name {
-    width: 25%;
-    min-width: 200px;
+  width: 25%;
+  min-width: 200px;
 }
 
 .Label {
-    width: 200px;
+  width: 200px;
 }
 
 .Body {
-    width: 36%;
-    min-width: 200px;
-    word-break: break-word;
+  width: 36%;
+  min-width: 200px;
+  word-break: break-word;
 }
 
 .Reason {
-    width: 20%;
-    margin-right: 10px;
-    margin-left: 10px;
-    word-break: break-word;
+  width: 20%;
+  margin-right: 10px;
+  margin-left: 10px;
+  word-break: break-word;
 }
 
 .Actions {
-    width: 19%;
-    min-width: 200px;
-    text-align: end;
+  width: 10%;
+  max-width: 200px;
+  text-align: start;
 }
 
 .LabelContainer {
-    display: flex;
-    flex-direction: column;
-    row-gap: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.5rem;
 }
 
 .LabelText {
-    font-weight: 500;
-    font-size: 17px;
-    word-break: break-all;
+  font-weight: 500;
+  font-size: 17px;
+  word-break: break-all;
 }
 
 .Quality {
-    font-size: 12px;
-    width: fit-content;
-    padding: 2px 6px;
-    background: #f0f7f1;
-    color: #555555;
-    border-radius: 8px;
+  font-size: 12px;
+  width: fit-content;
+  padding: 2px 6px;
+  background: #f0f7f1;
+  color: #555555;
+  border-radius: 8px;
 }
 
 .TableText {
-    text-align: left;
-    font-size: 14px;
-    color: #93a29b;
-    white-space: pre-line;
-    margin: 0;
-    padding: 0;
+  text-align: left;
+  font-size: 14px;
+  color: #93a29b;
+  white-space: pre-line;
+  margin: 0;
+  padding: 0;
 }
 
 .Status {
-    text-align: center;
+  text-align: center;
 }
 
 .AlignCenter {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .Status svg {
-    margin-right: 8px;
+  margin-right: 8px;
 }
 
 .LastModified {
-    width: 20%;
-    min-width: 185px;
-    color: #93a29b;
+  width: 20%;
+  min-width: 185px;
+  color: #93a29b;
 }
 
 .Status {
-    width: 150px;
+  width: 150px;
 }
 
 .Filters {
-    margin-left: 24px;
+  margin-left: 24px;
 }
 
 .FilterLabel {
-    color: #073f24 !important;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 1;
+  color: #073f24 !important;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1;
 }
 
 .Input {
-    display: inline;
+  display: inline;
 }
 
 .HelperText {
-    position: absolute;
-    color: #2ea36a;
-    font-weight: 400;
-    font-size: 10px;
-    bottom: -20px;
-    right: 10px;
-    text-decoration: none !important;
-    padding: 0 12px;
+  position: absolute;
+  color: #2ea36a;
+  font-weight: 400;
+  font-size: 10px;
+  bottom: -20px;
+  right: 10px;
+  text-decoration: none !important;
+  padding: 0 12px;
 }
 
 .ImportButton {
-    position: relative;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 
 .Uuid {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    font-size: 12px;
-    color: #93a29b !important;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  font-size: 12px;
+  color: #93a29b !important;
 }
 
 .Copy {
-    margin-left: 2px;
-    font-size: 12px;
+  margin-left: 2px;
+  font-size: 12px;
 }
 
 .DropDown {
-    border-radius: 24px;
-    border: 1px solid #cccccc;
-    display: flex;
-    width: 130px;
-    margin: auto;
-    height: 36px !important;
-    background: #ffffff;
-    min-height: 36px !important;
+  border-radius: 24px;
+  border: 1px solid #cccccc;
+  display: flex;
+  width: 130px;
+  margin: auto;
+  height: 36px !important;
+  background: #ffffff;
+  min-height: 36px !important;
 }
 
-.DropDown>fieldset {
-    border: none !important;
+.DropDown > fieldset {
+  border: none !important;
 }
 
 .FormStyle {
-    width: 150px !important;
+  width: 150px !important;
 }
 
 .Category {
-    width: 20%;
-    min-width: 100px;
+  width: 20%;
+  min-width: 100px;
 }
 
 .TemplateIcon {
-    width: 29px;
-    height: 29px;
+  width: 29px;
+  height: 29px;
 }
 
 .HsmUpdates {
-    margin-left: 8px;
-    cursor: pointer;
-    height: 36px;
-    border: 1px solid #cccccc;
-    background: #ffffff;
-    box-shadow: none;
-    font-size: 14px;
-    color: #2ea36a;
+  margin-left: 8px;
+  cursor: pointer;
+  height: 36px;
+  border: 1px solid #cccccc;
+  background: #ffffff;
+  box-shadow: none;
+  font-size: 14px;
+  color: #2ea36a;
 }
 
 .FilterContainer {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
 }
 
 .SecondaryButton {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin: 0 0.5rem;
-}
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0 0.5rem;
+}

src/containers/InteractiveMessage/InteractiveMessageList/InteractiveMessageList.module.css

@@ -8,9 +8,9 @@
 }
 
 .Actions {
-  width: 15%;
-  min-width: 200px;
-  text-align: end;
+  width: 10%;
+  max-width: 200px;
+  text-align: start;
 }
 
 .LabelText {

src/containers/SheetIntegration/SheetIntegrationList/SheetIntegrationList.module.css

@@ -8,9 +8,10 @@
 }
 
 .Actions {
-  text-align: end;
+  text-align: start;
   margin-left: auto;
-  min-width: 200px;
+  max-width: 200px;
+  width: 10%;
 }
 
 .HelperText {
@@ -38,7 +39,7 @@
 }
 
 .Name {
-  width: 30%;
+  width: 50%;
   min-width: 200px;
 }