fix layout issue

src/components/crowdsource-manager/crowdsource-manager.css

@@ -178,3 +178,7 @@
 .position-fixed {
   position: fixed;
 }
+
+.border-width-0 {
+  border-width: 0px;
+}

src/components/crowdsource-manager/crowdsource-manager.tsx

@@ -471,11 +471,12 @@ export class CrowdsourceManager {
    * Renders the component.
    */
   render() {
+    const borderClass = this._isMobile && this._hideTable ? "border-width-0" : "";
     return (
       <Host>
         <calcite-shell class="position-relative">
           <calcite-panel
-            class="width-full height-full"
+            class={`width-full height-full ${borderClass}`}
           >
             {this._getBody(this._layoutMode, this._panelOpen, this._hideTable)}
           </calcite-panel>
@@ -575,18 +576,20 @@ export class CrowdsourceManager {
    *
    * @param layoutMode ELayoutMode the current layout mode
    * @param panelOpen boolean indicates if all panels are open
+   * @param hideTable boolean when true the layer table is hidden
    *
    * @returns the css selectors
    * @protected
    */
   protected _getMapSizeClass(
     layoutMode: ELayoutMode,
-    panelOpen: boolean
+    panelOpen: boolean,
+    hideTable: boolean
   ): string {
     let sizeClass = "";
     switch (layoutMode) {
       case ELayoutMode.HORIZONTAL:
-        sizeClass = `${panelOpen ? "height-1-2 display-grid" : "height-0"} width-full position-relative`;
+        sizeClass = `${panelOpen && !hideTable ? "height-1-2 display-grid" : panelOpen && hideTable ? "height-full" : "height-0"} width-full position-relative`;
         break;
       case ELayoutMode.GRID:
         sizeClass = `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
@@ -644,7 +647,7 @@ export class CrowdsourceManager {
     return (
       <calcite-panel class={"width-full height-full"}>
         <div class={`width-full height-full overflow-hidden ${contentClass}`}>
-          {this._getMapAndCard(layoutMode, panelOpen)}
+          {this._getMapAndCard(layoutMode, panelOpen, hideTable)}
           {this._getTable(layoutMode, panelOpen, hideTable)}
         </div>
       </calcite-panel>
@@ -656,15 +659,17 @@ export class CrowdsourceManager {
    *
    * @param layoutMode ELayoutMode the current layout mode
    * @param panelOpen boolean indicates if all panels are open
+   * @param hideTable boolean when true the layer table is hidden
    *
    * @returns the map node
    * @protected
    */
   protected _getMapAndCard(
     layoutMode: ELayoutMode,
-    panelOpen: boolean
+    panelOpen: boolean,
+    hideTable: boolean
   ): VNode {
-    const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
+    const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen, hideTable);
     return (
       <div class={`${mapSizeClass} overflow-hidden`}>
         {this._getMapNode(layoutMode, panelOpen)}
@@ -731,7 +736,7 @@ export class CrowdsourceManager {
     const popupNodeClass = !this._expandPopup ? "height-full" : this.mapInfos?.length === 1 || this._isMobile ? "position-absolute-0" : "position-absolute-50";
     const headerClass = this._isMobile ? "display-none height-0" : "";
     const headerTheme = !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
-    const containerClass = this._isMobile && this._hideTable ? "position-fixed width-full height-full" : this._isMobile ? "display-none height-0" : "";
+    const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
     return (
       <div class={`${headerTheme} ${popupNodeClass} ${containerClass}`}>
         <calcite-panel>

src/components/info-card/info-card.css

@@ -75,10 +75,6 @@
   height: 40px;
 }
 
-.padding-top-46 {
-  padding-top: 46px;
-}
-
 .end-border {
   border-inline-end: 1px solid var(--calcite-color-border-1);
 }
@@ -95,3 +91,7 @@
 .padding-inline-start-1 {
   padding-inline-start: 1rem;
 }
+
+.border-width-0 {
+  border-width: 0px;
+}

src/components/info-card/info-card.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component, Element, Event, EventEmitter, Host, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
+import { Component, Element, Event, EventEmitter, Host, h, Listen, Method, Prop, State, VNode, Watch } from "@stencil/core";
 import InfoCard_T9n from "../../assets/t9n/info-card/resources.json";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { loadModules } from "../../utils/loadModules";
@@ -281,33 +281,13 @@ export class InfoCard {
     const editButtonClass = (!this.isLoading && this._editRecordOpen) || this._showListView ? "display-none" : "";
     const nextBackDisabled = this._features?.features?.length < 2;
     const nextBackClass = this.isMobile ? "display-none" : "";
-    const shellClass = this.isMobile && !this._editRecordOpen ? "padding-top-46" : "";
     const id = this._features?.selectedFeature?.getObjectId();
     const ids = parseInt(id?.toString(), 10) > -1 ? [id] : [];
     const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;
     return (
       <Host>
-        {this.isMobile && !this._editRecordOpen ? (
-          <calcite-panel>
-            <calcite-action
-              class="end-border"
-              icon={"chevron-left"}
-              iconFlipRtl={true}
-              onClick={() => this._closePopup()}
-              scale="s"
-              slot="header-actions-start"
-              text=""
-            />
-            <span
-              class="font-bold"
-              slot="header-content"
-            >
-              {this._mobileTitle}
-            </span>
-          </calcite-panel>
-        ) : undefined
-        }
-        <calcite-shell class={shellClass}>
+        <calcite-shell>
+          {this._getHeader()}
           <calcite-loader
             class={loadingClass}
             label={this._translations.fetchingData}
@@ -440,7 +420,7 @@ export class InfoCard {
 
   /**
    * Initializes the features widget if not created and updates the feature widget and other required states
-   * 
+   *
    * @protected
    */
   protected async setGraphics(): Promise<void> {
@@ -506,6 +486,38 @@ export class InfoCard {
     }) : Promise.resolve();
   }
 
+  /**
+   * Get the mobile header
+   *
+   * @returns the header node to display when in mobile mode
+   *
+   * @protected
+   */
+  protected _getHeader(): VNode {
+    return this.isMobile && !this._editRecordOpen ? (
+      <calcite-panel
+        class="border-width-0"
+        slot="header"
+      >
+        <calcite-action
+          class="end-border"
+          icon={"chevron-left"}
+          iconFlipRtl={true}
+          onClick={() => this._closePopup()}
+          scale="s"
+          slot="header-actions-start"
+          text=""
+        />
+        <span
+          class="font-bold"
+          slot="header-content"
+        >
+          {this._mobileTitle}
+        </span>
+      </calcite-panel>
+    ) : undefined;
+  }
+
   /**
    * Close the popup and emit the selected features
    */