Merge branch 'develop-postgres' into bug

Author: prathmesh703

src/screens/SubTags/SubTags.module.css

@@ -210,7 +210,10 @@
 
 .btnsContainer {
   display: flex;
+  /* Adjust spacing between items */
   margin: 2.5rem 0;
+  align-items: center;
+  gap: 10px;
 }
 
 .btnsContainer .btnsBlock {
@@ -393,6 +396,11 @@
   transform: scale(1.5);
   color: var(--bs-danger);
   margin-bottom: 1rem;
+  /* Add error icon for non-color indication */
+  &::before {
+    content: '⚠️';
+    margin-right: 0.5rem;
+  }
 }
 
 .subTagsLink {
@@ -405,13 +413,15 @@
   visibility: hidden;
 }
 
-.subTagsLink:hover {
+.subTagsLink:hover,
+.subTagsLink:focus {
   color: var(--subtle-blue-grey-hover);
   font-weight: 600;
   text-decoration: underline;
 }
 
-.subTagsLink:hover i {
+.subTagsLink:hover i,
+.subTagsLink:focus i {
   visibility: visible;
 }
 
@@ -606,3 +616,145 @@ hr {
     transform: rotate(360deg);
   }
 }
+
+.btnsContainer .btnsBlock {
+  display: flex;
+  width: max-content;
+}
+
+.btnsContainer .btnsBlock button {
+  margin-left: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btnsContainer .input {
+  flex: 1;
+  position: relative;
+  max-width: 60%;
+  justify-content: space-between;
+}
+
+.btnsContainer input {
+  outline: 1px solid var(--bs-gray-400);
+}
+
+.btnsContainer .input button {
+  width: 52px;
+}
+
+@media (max-width: 1020px) {
+  .btnsContainer {
+    flex-direction: column;
+    margin: 1.5rem 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    margin: 1.5rem 0 0 0;
+    justify-content: space-between;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin: 0;
+  }
+
+  .btnsContainer .btnsBlock div button {
+    margin-right: 1.5rem;
+  }
+}
+
+/* For mobile devices  */
+
+@media (max-width: 520px) {
+  .btnsContainer {
+    margin-bottom: 0;
+  }
+
+  .btnsContainer .btnsBlock {
+    display: block;
+    margin-top: 1rem;
+    margin-right: 0;
+  }
+
+  .btnsContainer .btnsBlock div {
+    flex: 1;
+  }
+
+  .btnsContainer .btnsBlock div[title='Sort organizations'] {
+    margin-right: 0.5rem;
+  }
+
+  .btnsContainer .btnsBlock button {
+    margin-bottom: 1rem;
+    margin-right: 0;
+    width: 100%;
+  }
+}
+
+.errorMessage {
+  margin-top: 25%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.tableHeader {
+  background-color: var(--bs-primary-text-emphasis);
+  color: var(--bs-white);
+  font-size: 1rem;
+}
+.rowBackground {
+  background-color: var(--bs-white);
+  max-height: 120px;
+  overflow-y: auto;
+}
+
+.subTagsLink {
+  color: var(--bs-blue);
+  font-weight: 500;
+  cursor: pointer;
+  /* Prevent layout shift */
+  &::after {
+    display: block;
+    content: attr(data-text);
+    font-weight: 600;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+}
+
+.subTagsLink i {
+  visibility: hidden;
+}
+
+.tagsBreadCrumbs {
+  color: var(--bs-gray);
+  cursor: pointer;
+  /* Prevent layout shift */
+  &::after {
+    display: block;
+    content: attr(data-text);
+    font-weight: 600;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
+}
+
+.tagsBreadCrumbs:hover,
+.tagsBreadCrumbs:focus {
+  color: var(--bs-blue);
+  font-weight: 600;
+  text-decoration: underline;
+}
+
+.subTagsScrollableDiv {
+  scrollbar-width: auto;
+  scrollbar-color: var(--bs-gray-400) var(--bs-white);
+
+  max-height: calc(100vh - 18rem);
+  overflow: auto;
+}