fix: Filter dropdown responsiveness

Author: fathima-mirza

example/src/styles/ExportDropdown.css

@@ -12,6 +12,13 @@
   font-family: 'DM Sans', sans-serif;
 }
 
+/* Add left: 0px for screens less than or equal to 700px */
+@media (max-width: 700px) {
+  .export-dropdown {
+    left: 0px;
+  }
+}
+
 .export-dropdown-content {
   padding: 8px 0;
 }

example/src/styles/FilterDropdown.css

@@ -1,7 +1,6 @@
 .filter-dropdown {
   position: absolute;
   top: calc(100% + 8px);
-  right: 0;
   min-width: 400px;
   max-width: 500px;
   max-height: 500px;
@@ -14,6 +13,13 @@
   font-family: 'DM Sans', sans-serif;
 }
 
+/* Add right: 0 only for screens greater than 700px */
+@media (min-width: 701px) {
+  .filter-dropdown {
+    right: 0;
+  }
+}
+
 .filter-dropdown-header {
   display: flex;
   justify-content: space-between;

src/components/TableHeader.tsx

@@ -104,13 +104,13 @@ export const TableHeader: React.FC<TableHeaderProps> = ({
                           style={{ marginRight: 8, cursor: "pointer" }}
                         />
                       )}
-                      <span style={{width: "16px"}}/>
                       <span
                         style={{
                           display: "inline-flex",
                           alignItems: "center",
                           cursor: isColumnSortable ? "pointer" : "default",
                           userSelect: "none",
+                          marginLeft: index === 0 ? "16px" : "0px",
                         }}
                         onClick={
                           isColumnSortable