globuswebcomponents 2.8.11 → 2.8.12

package/dist/collection/components/gb-portal/gb-portal.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-portal.js","sourceRoot":"","sources":["../../../src/components/gb-portal/gb-portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, Watch, h } from '@stencil/core';\r\nimport { computePosition, offset, flip, shift, autoUpdate } from '@floating-ui/dom';\r\n\r\n@Component({\r\n  tag: 'gb-portal',\r\n  styleUrl: 'gb-portal.css',\r\n  shadow: true,\r\n})\r\nexport class GbPortal {\r\n  @Prop() anchorId?: string;\r\n  @Prop() placement: any = 'bottom-start';\r\n  @Prop() open: boolean = false;\r\n  @Element() el: HTMLElement;\r\n\r\n  private portalHost?: HTMLElement;\r\n  private wrapper?: HTMLElement;\r\n  private cleanupAutoUpdate?: () => void;\r\n\r\n  componentDidLoad() {\r\n    this.ensureHost();\r\n    if (this.open) {\r\n      this.mountContent();\r\n      this.updatePosition();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.unmountContent();\r\n  }\r\n\r\n  @Watch('open')\r\n  onOpenChange(isOpen: boolean) {\r\n    if (isOpen) {\r\n      this.ensureHost();\r\n      this.mountContent();\r\n      this.updatePosition();\r\n    } else {\r\n      this.unmountContent();\r\n    }\r\n  }\r\n\r\n  private ensureHost() {\r\n    this.portalHost = document.getElementById('gb-portal-host');\r\n    if (!this.portalHost) {\r\n      this.portalHost = document.createElement('div');\r\n      this.portalHost.id = 'gb-portal-host';\r\n      document.body.appendChild(this.portalHost);\r\n    }\r\n  }\r\n\r\n  private mountContent() {\r\n    if (!this.portalHost) this.ensureHost();\r\n    if (!this.wrapper) {\r\n      this.wrapper = document.createElement('div');\r\n      this.wrapper.className = 'gb-portal-wrapper';\r\n    }\r\n\r\n    // move light DOM children first\r\n    while (this.el.firstChild) {\r\n      this.wrapper.appendChild(this.el.firstChild as Node);\r\n    }\r\n\r\n    // move shadow root children if any (rare), preserving nodes\r\n    if (this.el.shadowRoot) {\r\n      while (this.el.shadowRoot.firstChild) {\r\n        this.wrapper.appendChild(this.el.shadowRoot.firstChild as Node);\r\n      }\r\n    }\r\n\r\n    this.portalHost.appendChild(this.wrapper);\r\n\r\n    this.setupAutoUpdate();\r\n  }\r\n\r\n  private unmountContent() {\r\n    if (this.cleanupAutoUpdate) {\r\n      this.cleanupAutoUpdate();\r\n      this.cleanupAutoUpdate = undefined;\r\n    }\r\n\r\n    if (this.wrapper && this.portalHost && this.portalHost.contains(this.wrapper)) {\r\n      this.portalHost.removeChild(this.wrapper);\r\n      this.wrapper = undefined;\r\n    }\r\n  }\r\n\r\n  private updatePosition() {\r\n    const anchor = this.anchorId ? this.findElementByIdDeep(this.anchorId) : null;\r\n    const element = this.wrapper;\r\n    if (!anchor || !element) return;\r\n\r\n    computePosition(anchor, element, {\r\n      placement: this.placement,\r\n      middleware: [offset(6), flip(), shift()],\r\n    }).then(({ x, y }) => {\r\n        console.log(x);\r\n      Object.assign(element.style, {\r\n        position: 'absolute',\r\n        left: `${x}px`,\r\n        top: `${y}px`,\r\n        zIndex: '9999',\r\n      });\r\n    });\r\n  }\r\n\r\n  private setupAutoUpdate() {\r\n    const anchor = this.anchorId ? this.findElementByIdDeep(this.anchorId) : null;\r\n    const element = this.wrapper;\r\n    if (!anchor || !element) return;\r\n\r\n    this.cleanupAutoUpdate = autoUpdate(anchor, element, () => this.updatePosition());\r\n  }\r\n\r\n  private findElementByIdDeep(id: string): HTMLElement | null {\r\n    // try normal document scope first\r\n    const docMatch = document.getElementById(id);\r\n    if (docMatch) return docMatch as HTMLElement;\r\n\r\n    // search through all elements that may host a shadowRoot\r\n    const all = Array.from(document.querySelectorAll('*')) as HTMLElement[];\r\n    for (const el of all) {\r\n      const sr = (el as any).shadowRoot as ShadowRoot | undefined;\r\n      if (sr) {\r\n        try {\r\n          const sel = `#${(window as any).CSS && (window as any).CSS.escape ? (window as any).CSS.escape(id) : id}`;\r\n          const found = sr.querySelector(sel) as HTMLElement | null;\r\n          if (found) return found;\r\n        } catch (e) {\r\n          // ignore selector errors\r\n        }\r\n      }\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  render() {\r\n    return <slot />;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-portal.js","sourceRoot":"","sources":["../../../src/components/gb-portal/gb-portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Element, Watch, h } from '@stencil/core';\r\nimport { computePosition, offset, flip, shift, autoUpdate, size } from '@floating-ui/dom';\r\nimport { PortalPlacement } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-portal',\r\n  styleUrl: 'gb-portal.css',\r\n  shadow: true,\r\n})\r\nexport class GbPortal {\r\n  @Prop() anchorId?: string;\r\n  @Prop() placement: PortalPlacement = 'bottom-end';\r\n  @Prop() open: boolean = false;\r\n  @Prop() anchorEl?: HTMLElement;\r\n  @Element() el: HTMLElement;\r\n\r\n  private portalHost?: HTMLElement;\r\n  private wrapper?: HTMLElement;\r\n  private cleanupAutoUpdate?: () => void;\r\n\r\n  componentDidLoad() {\r\n    this.ensureHost();\r\n    if (this.open) {\r\n      this.mountContent();\r\n      this.updatePosition();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.unmountContent();\r\n  }\r\n\r\n  @Watch('open')\r\n  onOpenChange(isOpen: boolean) {\r\n    if (isOpen) {\r\n      this.ensureHost();\r\n      this.mountContent();\r\n      this.updatePosition();\r\n    } else {\r\n      this.unmountContent();\r\n    }\r\n  }\r\n\r\n  private ensureHost() {\r\n    this.portalHost = document.getElementById('gb-portal-host');\r\n    if (!this.portalHost) {\r\n      this.portalHost = document.createElement('div');\r\n      this.portalHost.id = 'gb-portal-host';\r\n      document.body.appendChild(this.portalHost);\r\n    }\r\n  }\r\n\r\n  private mountContent() {\r\n    if (!this.portalHost) this.ensureHost();\r\n    if (!this.wrapper) {\r\n      this.wrapper = document.createElement('div');\r\n      this.wrapper.className = 'gb-portal-wrapper';\r\n    }\r\n\r\n    // move light DOM children first\r\n    while (this.el.firstChild) {\r\n      this.wrapper.appendChild(this.el.firstChild as Node);\r\n    }\r\n\r\n    // move shadow root children if any (rare), preserving nodes\r\n    if (this.el.shadowRoot) {\r\n      while (this.el.shadowRoot.firstChild) {\r\n        this.wrapper.appendChild(this.el.shadowRoot.firstChild as Node);\r\n      }\r\n    }\r\n\r\n    this.portalHost.appendChild(this.wrapper);\r\n\r\n    this.setupAutoUpdate();\r\n  }\r\n\r\n  private unmountContent() {\r\n    if (this.cleanupAutoUpdate) {\r\n      this.cleanupAutoUpdate();\r\n      this.cleanupAutoUpdate = undefined;\r\n    }\r\n\r\n    if (this.wrapper && this.portalHost && this.portalHost.contains(this.wrapper)) {\r\n      this.portalHost.removeChild(this.wrapper);\r\n      this.wrapper = undefined;\r\n    }\r\n  }\r\n\r\n  private updatePosition() {\r\n    const anchor = this.anchorEl ?? (this.anchorId ? this.findElementByIdDeep(this.anchorId) : null);\r\n\r\n    const element = this.wrapper;\r\n    if (!anchor || !element) return;\r\n\r\n    computePosition(anchor, element, {\r\n      placement: this.placement,\r\n      middleware: [\r\n        offset(4),\r\n        flip(),\r\n        shift({ padding: 0 }),\r\n        size({\r\n          apply({ rects, elements }) {\r\n            elements.floating.style.minWidth = `${rects.reference.width}px`;\r\n          },\r\n        }),\r\n      ],\r\n    }).then(({ x, y }) => {\r\n      console.log(x);\r\n      Object.assign(element.style, {\r\n        position: 'absolute',\r\n        right: `6rem`,\r\n        top: `${y}px`,\r\n        zIndex: '9999',\r\n        padding: '0'\r\n      });\r\n    });\r\n    // console.log(anchor.getBoundingClientRect());\r\n  }\r\n\r\n  private setupAutoUpdate() {\r\n    const anchor = this.anchorId ? this.findElementByIdDeep(this.anchorId) : null;\r\n    const element = this.wrapper;\r\n    if (!anchor || !element) return;\r\n\r\n    this.cleanupAutoUpdate = autoUpdate(anchor, element, () => this.updatePosition());\r\n  }\r\n\r\n  private findElementByIdDeep(id: string): HTMLElement | null {\r\n    // try normal document scope first\r\n    const docMatch = document.getElementById(id);\r\n    if (docMatch) return docMatch as HTMLElement;\r\n\r\n    // search through all elements that may host a shadowRoot\r\n    const all = Array.from(document.querySelectorAll('*')) as HTMLElement[];\r\n    for (const el of all) {\r\n      const sr = (el as any).shadowRoot as ShadowRoot | undefined;\r\n      if (sr) {\r\n        try {\r\n          const sel = `#${(window as any).CSS && (window as any).CSS.escape ? (window as any).CSS.escape(id) : id}`;\r\n          const found = sr.querySelector(sel) as HTMLElement | null;\r\n          if (found) return found;\r\n        } catch (e) {\r\n          // ignore selector errors\r\n        }\r\n      }\r\n    }\r\n\r\n    return null;\r\n  }\r\n\r\n  render() {\r\n    return <slot />;\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-tab-button-base/gb-tab-button-base.js

@@ -39,12 +39,18 @@ export class GbTabButtonBase {
     handleClick() {
         this.tabClicked.emit();
     }
+    getFormattedLabel() {
+        const words = this.tabName.split(' ');
+        if (words.length === 0)
+            return this.tabName;
+        return words[0] + ' ' + words.slice(1).join(' ').toLowerCase();
+    }
     render() {
-        return (h("div", { key: '75b1eb20a8808b626e8795898073141e76fe012a', class: `tab_button_div ${this.type}
+        return (h("div", { key: '674270b2a020edbbdd16ea80b753d4cf096532f8', class: `tab_button_div ${this.type}
       ${this.current ? 'current' : ''} 
       ${this.fullWidth ? 'full_width' : ''} 
       ${this.size}
-      ${this.alignment}`, onClick: () => this.handleClick() }, h("p", { key: 'd4ad6c14914fa2ad8b5b6a36bd381a026907b1e8', class: `tab_name ${!this.current ? 'tab_text' : ''} ${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}` }, this.tabName), this.badge && (h("gb-badge", { key: '84a937042bfaeb0e16954d285ba8ecec92bf0724', size: "sm", type: "pill_color", color: this.current ? 'information' : 'gray' }, h("slot", { key: '325a0b27b6f35a1f5e33268c5767f280d54445b6', name: "count" })))));
+      ${this.alignment}`, onClick: () => this.handleClick() }, h("p", { key: '745992c61289f3070a9a0fbd01e53091b66b9907', class: `tab_name ${!this.current ? 'tab_text' : ''} ${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}` }, this.getFormattedLabel()), this.badge && (h("gb-badge", { key: 'be9b5ca6b61d9b2021fe8f962231c8741117be98', size: "sm", type: "pill_color", color: this.current ? 'information' : 'gray' }, h("slot", { key: 'fea951d401a2286f406797ec9f1bbc0015b8fa74', name: "count" })))));
     }
     static get is() { return "gb-tab-button-base"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-tab-button-base/gb-tab-button-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-tab-button-base.js","sourceRoot":"","sources":["../../../src/components/gb-tab-button-base/gb-tab-button-base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQjF,MAAM,OAAO,eAAe;IAL5B;QAMU,YAAO,GAAY,KAAK,CAAC;QAEzB,cAAS,GAAY,KAAK,CAAC;QAC3B,UAAK,GAAY,KAAK,CAAC;QAEvB,YAAO,GAAW,EAAE,CAAC;KAqE9B;IAhEC,cAAc;QACZ,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;YAC1B,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,qBAAqB;QACnB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,mBAAmB;QACjB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;YAC1B,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAEzD,IAAG,QAAQ,EAAE,CAAC;YACV,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;QACvD,CAAC;IACH,CAAC;IAED,WAAW;QACT,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DACA,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI;QAChC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;QAC7B,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE;QAClC,IAAI,CAAC,IAAI;QACT,IAAI,CAAC,SAAS,EAAE,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAE/B,0DAAG,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,IAAG,IAAI,CAAC,OAAO,CAAK;YACjJ,IAAI,CAAC,KAAK,IAAI,CACb,iEACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,YAAY,EACjB,KAAK,EACH,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM;gBAGvC,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACjB,CACZ,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { GeneralSizes, TabTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-tab-button-base',\r\n  styleUrl: 'gb-tab-button-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbTabButtonBase {\r\n  @Prop() current: boolean = false;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() fullWidth: boolean = false;\r\n  @Prop() badge: boolean = false;\r\n  @Prop() type: TabTypes;\r\n  @Prop() tabName: string = '';\r\n  @Prop() alignment: 'horizontal' | 'vertical';\r\n  @Element() el: HTMLElement;\r\n  @Event() tabClicked: EventEmitter<void>;\r\n\r\n  getTextClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-sm-medium';\r\n      case 'md':\r\n        return 'text-md-medium';\r\n    }\r\n  }\r\n\r\n  getCurrentTextClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  getCountTextClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-xs-medium';\r\n      case 'md':\r\n        return 'text-sm-medium';\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const tabCount = this.el.querySelector('[slot=\"count\"]');\r\n\r\n    if(tabCount) {\r\n        tabCount.classList.add(this.getCountTextClasses());\r\n    }\r\n  }\r\n\r\n  handleClick() {\r\n    this.tabClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div \r\n      class={`tab_button_div ${this.type}\r\n      ${this.current ? 'current' : ''} \r\n      ${this.fullWidth ? 'full_width' : ''} \r\n      ${this.size}\r\n      ${this.alignment}`} \r\n      onClick={() => this.handleClick()}\r\n      >\r\n        <p class={`tab_name ${!this.current ? 'tab_text' : ''} ${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}`}>{this.tabName}</p>\r\n        {this.badge && (\r\n          <gb-badge\r\n            size=\"sm\"\r\n            type=\"pill_color\"\r\n            color={\r\n              this.current ? 'information' : 'gray'\r\n            }\r\n          >\r\n            <slot name=\"count\"></slot>\r\n          </gb-badge>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-tab-button-base.js","sourceRoot":"","sources":["../../../src/components/gb-tab-button-base/gb-tab-button-base.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop, h } from '@stencil/core';\r\nimport { GeneralSizes, TabTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-tab-button-base',\r\n  styleUrl: 'gb-tab-button-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbTabButtonBase {\r\n  @Prop() current: boolean = false;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() fullWidth: boolean = false;\r\n  @Prop() badge: boolean = false;\r\n  @Prop() type: TabTypes;\r\n  @Prop() tabName: string = '';\r\n  @Prop() alignment: 'horizontal' | 'vertical';\r\n  @Element() el: HTMLElement;\r\n  @Event() tabClicked: EventEmitter<void>;\r\n\r\n  getTextClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-sm-medium';\r\n      case 'md':\r\n        return 'text-md-medium';\r\n    }\r\n  }\r\n\r\n  getCurrentTextClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  getCountTextClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-xs-medium';\r\n      case 'md':\r\n        return 'text-sm-medium';\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const tabCount = this.el.querySelector('[slot=\"count\"]');\r\n\r\n    if (tabCount) {\r\n      tabCount.classList.add(this.getCountTextClasses());\r\n    }\r\n  }\r\n\r\n  handleClick() {\r\n    this.tabClicked.emit();\r\n  }\r\n\r\n  getFormattedLabel() {\r\n    const words = this.tabName.split(' ');\r\n    if (words.length === 0) return this.tabName;\r\n    return words[0] + ' ' + words.slice(1).join(' ').toLowerCase();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div\r\n        class={`tab_button_div ${this.type}\r\n      ${this.current ? 'current' : ''} \r\n      ${this.fullWidth ? 'full_width' : ''} \r\n      ${this.size}\r\n      ${this.alignment}`}\r\n        onClick={() => this.handleClick()}\r\n      >\r\n        <p class={`tab_name ${!this.current ? 'tab_text' : ''} ${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}`}>{this.getFormattedLabel()}</p>\r\n        {this.badge && (\r\n          <gb-badge size=\"sm\" type=\"pill_color\" color={this.current ? 'information' : 'gray'}>\r\n            <slot name=\"count\"></slot>\r\n          </gb-badge>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-table/gb-table.css

@@ -2817,24 +2817,47 @@ thead {
 }
 
 .table_head_row {
-  text-align: left;
   width: 100%;
-  align-items: center;
-  gap: 0.75rem;
-  align-self: stretch;
-  border-bottom: 1px solid var(--color-border-subtle #cdd5df);
+  border-bottom: 1px solid var(--color-border-subtle, #cdd5df);
   background: var(--color-background-gray-subtler, #eef2f6);
 }
 
 .table_head_row th {
+  /* display: flex; */
+  justify-content: space-between;
+  align-items: center;
   padding: 0.75rem 1.5rem;
 }
 
+.table_head_content {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.align_left {
+  flex-direction: row;
+}
+
+.align_right {
+  flex-direction: row-reverse;
+}
+
 .head_text,
 .body_text {
   color: var(--color-text, #4b5565);
 }
 
+.head_text.sortable:hover{
+  color: var(--color-text-bold, #202939);
+}
+
+.table_head_icons {
+  display: flex;
+  gap: var(--spacing-1);
+}
+
 .body_text {
   width: 100%;
   white-space: nowrap;
@@ -2862,17 +2885,16 @@ thead {
 }
 
 th.sticky_left,
-th.sticky_right{
+th.sticky_right {
   background: var(--color-background-gray-subtler, #eef2f6);
 }
 
 .table_detail.sticky_left,
-.table_detail.sticky_right{
+.table_detail.sticky_right {
   background: var(--color-background-card, #ffffff);
 }
 
-th.sticky_left::after,
-th.sticky_right::after {
+table.scrollable th.sticky_left::after{
   content: '';
   position: absolute;
   top: 0;
@@ -2883,7 +2905,8 @@ th.sticky_right::after {
   pointer-events: none;
 }
 
-.table_detail.sticky_left::after .table_detail.sticky_right::after {
+/* table.scrollable .table_detail.sticky_left::after,
+table.scrollable .table_detail.sticky_right::after {
   content: '';
   position: absolute;
   top: 0;
@@ -2893,7 +2916,7 @@ th.sticky_right::after {
   box-shadow: 2px 0 6px var(--color-border-subtle, #cdd5df);
   pointer-events: none;
   background: var(--color-background-card, #ffffff);
-}
+} */
 
 .sticky_right {
   position: sticky;
@@ -2901,22 +2924,67 @@ th.sticky_right::after {
   z-index: 1;
 }
 
-.empty_div{
+.empty_div {
   height: 100%;
   width: 70px;
 }
 
-#dropdown_button{
+#dropdown_button {
   position: relative;
 }
 
-.dropdown_wrapper{
-    width: max-content;
-    border-radius: var(--rounded-sm);
-    border: 1px solid var(--color-border-subtler, #e3e8ef);
-    background: var(--color-surface, #ffffff);
-    box-shadow: var(--shadow-md);
-    padding-right: 0.5rem;
-    position: absolute;
-    z-index: 1000;
+.dropdown_wrapper {
+  width: 9.5rem;
+  border-radius: var(--rounded-sm);
+  border: 1px solid var(--color-border-subtler, #e3e8ef);
+  background: var(--color-surface, #ffffff);
+  box-shadow: var(--shadow-md);
+  position: absolute;
+  z-index: 1000;
+}
+
+/* Mobile Table View Styles */
+.mobile_wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.mobile-card {
+  padding: 16px;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.mobile-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+/* .mobile-cell {
+  font-size: 14px;
+}
+
+.mobile-top .mobile-cell:first-child {
+  font-weight: 500;
+  font-size: 16px;
+}
+
+.mobile-top .mobile-cell.right {
+  font-weight: 600;
+  font-size: 16px;
+} */
+
+.right {
+  text-align: right;
+}
+
+.top_left_text,
+.top_right_text {
+  color: var(--color-text, #4B5565);
+}
+
+.bottom_left_text {
+  color: var(--color-text-subtle, #697586);
 }