From 33b56479a85d3a4888a5610c27d98676e09b7fdd Mon Sep 17 00:00:00 2001
From: Kinga Kazala <22429087+kkazala@users.noreply.github.com>
Date: Thu, 10 Aug 2023 16:21:06 +0200
Subject: [PATCH] additional spacing added for teams client

---
 samples/react-dashboards/README.md            |   5 +++
 .../config/package-solution.json              |  11 +----
 samples/react-dashboards/package.json         |   2 +-
 .../sharepoint/assets/appLogo.pdn             | Bin 0 -> 12133 bytes
 .../sharepoint/assets/appLogo.png             | Bin 0 -> 3629 bytes
 .../src/common/ChartHelper.ts                 |   3 +-
 .../src/common/ComponentStyles.ts             |  42 ++++++++----------
 .../ApplicationInsightsLogsWebPart.ts         |  12 ++++-
 .../CostInsightsDashboardWebPart.ts           |  11 ++++-
 9 files changed, 47 insertions(+), 39 deletions(-)
 create mode 100644 samples/react-dashboards/sharepoint/assets/appLogo.pdn
 create mode 100644 samples/react-dashboards/sharepoint/assets/appLogo.png

diff --git a/samples/react-dashboards/README.md b/samples/react-dashboards/README.md
index 9e668a138..417f00740 100644
--- a/samples/react-dashboards/README.md
+++ b/samples/react-dashboards/README.md
@@ -198,6 +198,11 @@ All permissions are granted to the whole tenant and not to a specific applicatio
 - `f5c26e74-f226-4ae8-85f0-b4af0080ac9e` Application Insights API
 - `797f4846-ba00-4fd7-ba43-dac1f8f63013` Windows Azure Service Management API
 
+#### Developer resources
+
+- [Build your first app with SPFx (Teams)](https://learn.microsoft.com/en-us/microsoftteams/platform/sbs-gs-spfx?tabs=vscode%2Cviscode)
+- [Microsoft 365 Developer Proxy](https://github.com/microsoft/m365-developer-proxy)
+
 ## Disclaimer
 
 **THIS CODE IS PROVIDED _AS IS_ WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
diff --git a/samples/react-dashboards/config/package-solution.json b/samples/react-dashboards/config/package-solution.json
index 4f3887ca0..eeef92228 100644
--- a/samples/react-dashboards/config/package-solution.json
+++ b/samples/react-dashboards/config/package-solution.json
@@ -2,8 +2,9 @@
   "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
   "solution": {
     "name": "Application Insights and Cost Management dashboards",
+    "iconPath": "assets/appLogo.png",
     "id": "09af0554-67db-4a65-baa6-872dee7117a8",
-    "version": "1.0.0.0",
+    "version": "1.0.1.0",
     "includeClientSideAssets": true,
     "skipFeatureDeployment": true,
     "isDomainIsolated": false,
@@ -16,14 +17,6 @@
         "resource": "Application Insights API",
         "scope": "user_impersonation"
       }
-      // {
-      //   "resource": "Microsoft Graph", //Microsoft Graph
-      //   "scope": "user_impersonation"
-      // },
-      // {
-      //   "resource": "Office 365 SharePoint Online", //Office 365 SharePoint Online
-      //   "scope": "user_impersonation"
-      // }
     ],
     "developer": {
       "name": "Kinga Kazala (ETHZ)",
diff --git a/samples/react-dashboards/package.json b/samples/react-dashboards/package.json
index 86e6111bf..b130f0892 100644
--- a/samples/react-dashboards/package.json
+++ b/samples/react-dashboards/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spfx-applicationinsights",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "engines": {
     "node": ">=16.13.0 <17.0.0"
diff --git a/samples/react-dashboards/sharepoint/assets/appLogo.pdn b/samples/react-dashboards/sharepoint/assets/appLogo.pdn
new file mode 100644
index 0000000000000000000000000000000000000000..afec3729d64177962ba201198d32b6e67d61d894
GIT binary patch
literal 12133
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
Y8^*L^|NY8pPTyRYr%em&`9<J=0P7oXU;qFB

literal 0
HcmV?d00001

diff --git a/samples/react-dashboards/sharepoint/assets/appLogo.png b/samples/react-dashboards/sharepoint/assets/appLogo.png
new file mode 100644
index 0000000000000000000000000000000000000000..319f56ab7d1b52f56152ee90c90047396886ebad
GIT binary patch
literal 3629
zcmV+|4$|?7P)<h;3K|Lk000e1NJLTq003YB003YJ1^@s6;+S_h00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGizyJUazyWI3i3tDz4Z=x8K~#8N?Ol6p
zQ|A>wN$l88nkNB5XhJEJW~H>HEnT~|Q_&t(w{C4=)lyYci>3)x(-7L&)UDFA{y~Sd
zssEr2wQ5KH7*Z#(f!3A+Wef_85jwU6nuaDklR${`a2z|f<41OW*WXQUoNN0&Y=<QG
zXPw-8zsI@fJFoA%_u4mP!GZ+~7A#n>V8McgIfp#4%?P$^*<yd`rI!}CT&_EvPUn4g
zyS+X?KfjvEp2rZ)ZhDN3jpfB+u}Cx;b%(>@_CO%eGCVx|SzBA%^%q}!F(8^{1Q}7v
z_U+q?o_p@Oha3*avrJDG78cgqY&K%W(+twPD%cPdi9{$A3SDJG{L}CE?`>*oI^NLG
z&?lOhf@$q^baXskSy{P}J^s6_{1PaAwgSc&WsHoB9Co|iZ`aq?f564zcx{fcYu7GU
zcX#)%SeR=ZsvNa*2W*Hj9=E5ftLu+@_Ux$<D#;yAo;+FF+uOU7ok55+H^KA680+EV
z{rmTSNvJ0KIDY(iDTm+gx#soB06nliPJZ~|hbx7OvWFczb~ta`xbZGeO5*eu0Hmaz
zo}R;vjg7TJRoMaOykE@qw37@-N0%>Oeuvdm6xWtEXkN0MKY#v_ii(P#@Y-IKSWp7X
z?u82%zHsKunFdj$37QP>%rnn8s;a7f#LLWEMUe#+uzrf_>gqPW`R1FqiK5Kl%9SgR
z@v^I5M4N>a2r^n)S~dyQrG=IVC}7Kei?41g#j%AH;1uncKY#u=w`|$6NED?+S_7~(
z=kZnUlLZ9@qQpWf;7&kMQPI6mJ@u5PWocRiu=n52-ha0^w4ec)D>({Q@orkLO?xj0
zc}?tEFo1M-fwN+Oxn#3+cYAYd0B$-KL-V;}fIJ>4KJnbIrt7R5U^E(~>%Jix4Tq)M
zwP+q2i*XHD%UzZGfP9>+JP{}d66;d6m&+6P6QR~W85I3_oO%4IDJdf-Uz}o*0!q|(
z)(z0<_0a3*PLVe}%3c7G(z2WtfLajkKUh#lUs+T~PKN_aQ0a<Tsq?HFU^Eh;gPj*>
zch?0f;S<kAghxi`XG>R6Wm!3vpTsLhDH3F)Gl1rML24L{MyTC4NUj1?Y-Tj_A~Es|
zddTnhQ&^FPwZgRK;P-m6=&S-e_ZT~&&*!5+AYjM<##0a%dqV+g{Gyp!c@nngsoOHb
z?LwH8HOPcubuga-m8gv|pCI$mF*ehH6b@e9sL3ONi$i^bwBAucHPwr7H<U_COQkd<
zKO4{98~_6Z*#Pay4d9PO={wbR^tIY$WaIi&o&h;SyrMeLeS!Yb(@D<!i98A;t}Lmb
z7w)*5)17UC55}g(Q(2z4p9r=749F8?c|N#&o=yz(P@$TGahs64pPsds)2%f%;|Aa>
zVa*0mcUw(J$yaiCtcVsDmr`k=lZxzxR9xstN~o`Jy6CR5c@*L>Rsv(FDK4RT&Z5bD
zlJQK|2K$L5*Ci0nQ_1qw-crU9klJ}rm#RJ$Oc+2Q*?A2L1fwZ?8sm~Vz<*P_nmL#^
z0Mfhg05#%2qM<f$uPHnvKGSFlHF;#hq-zEy43I`4sZ*Z;WYZ6)4;h*RRFnhzNX3~_
z-1J32$|0B>p7|6cK}9(bETcNhlpzfui?+{@0W27WaRX>^$Z2%inF8Ym;1xhxWFT~J
zdK;P?V}>T-ISi9(Fkyf+rXP<Gb1pK`+oY>y3ns<NNCc=|pg=BcjX=qV|A>82nPcGG
zxDlw7X%d;VKn^0n9O7K2N&7iK_U3>LO%ZW68De%5!ngr)q?6g}`*9dIKw8aY#zHce
zqz^^14BU#&=9$y-=7~mK)m)4RGCSLv=`-IT*;Eu1;5M%;zndOfR3}Q(qs4ulwzYmr
z<pmQD`EkGT-tu|$?Im|g$GM0Kj3%GQ^hx(6I_kbAea8@GIQRIL>w|s$w63sHdLUC>
zU9J0pOv*|ixdDg`FhYN7`!9Vq?3rQ!bP9~c=*M@gVgoFR7ivID?{)fZYZDt_;)fvM
zg$P*aD$Z#n;5%l0JjPHg!it)DUfBTa9rLEo0PnV*p>sYD*^?UJ9{O^PJ_Bq$cZw=(
zlYfZ=ei1zIjvwX>c2;CkCGnU;eFOA8r*Q)qp95sDM#iLv<q7L!Caj<JV=5mI|B<2$
zhR!A7ylV0&$qbAeK-d-e86r#}2*+C^n8GUsDbFwOCzVMM>J$5=>ywo5#{`TUK%6)(
z#8j`qC&oz>`}&}M<(bEXudF!OE0yF_*~b<GOXLAUIqDPpDUX$u$KtE;kqDCnzH(y%
zDf1J+CsNlSmtqch``l?d>m8JGr4s1oXWCqUA3eNS`)}5oZ*<e^EhnkcRwzn{!p!H1
zg^Ov!$_FKbOD7)}eX4kvF!x?;rN3WpmsT<|g0U#Qa@Pa&NOi3=fySXeJbBXH^Tk>E
zYu5$htd5jF8GJn2H%Q+vp3if@;vCNbV9T<@0meN-g_4XfDbO6ACHI%+5vF2c5S$ju
ziErio$sfRxZy)C&6DIMRqFW@Rr0S24j8cb_Y<#Rb&#|1w=D7(NH-G?(AqjzR2Pg>w
z#=oYnUqB_lF~JL@2h1TZgWw~P5kBA{lad!xTrP7d$g}~V<QRu`qHs|`dI!u5*;6O;
zGr|Y$(Qgu;D8f}V&<LD1&PRQWG4M12;|5^CFc!>1iGqRPx!CFt02NOI={5jU0w0iW
zfslHnzDPMj7QqW!=|m=AZVmvD2O%5_q9l31d?Xrb16nKj$)S&ZT~PF!AjqQ+ae3m(
z9#2JrpA`Mmn}UQOD&Yx2h;jqbRvW-C8ddP)eWNKzDGSJ03W}$)cp6F|<`+c@Fah(E
zFbg6H2t_H0%Obqht2ih~$xj}v-pOuUak4xhb`-7<Ei^)DNXR2dmM#9HMB~W7B&--<
z0!55?9Dl-7_^=^$4iu?D$zz<4PJwV<^ppF`G|pEts%UHgrVW6wjz$y$DJUF`==NOJ
z9EBs11YQxz+w=g6Lq8=SC{C}kAV1!k7@Z>1gdxnpoB?<+2y-Y}=^YZ`RgY{Ky%7(l
zK?OfVLl}H?8UPW1eoC3}qe8tFKq`}DQ1BTiVH7hkpMoSo*b~MH-V*nWP$Vqf!_fn*
zFrYXkKMYpyT!O%pJXMy5337tJ9w3t7U~ygvgfb>GFlhkJs4M^m25*Ry@C*nTj!@5#
zhX#DZ<o0@|64y-}57BkcAa%HJkPCTN@B^PP^XVJ*(x4h2@R-EMLw(E(=S5$oYy})e
zU-b4+Z$kTI)X(R<#xjLQ!xU5SnIQ89n7HYY1nhZ9UB=`0(bgmT>G-uyawfdaM!wh5
z&r#6KlnQ8vlN9paT{at4+U(NpVL%pega>*m91=$p<;jFwV=tsz@Ov_G44{uYJW8#Y
zQ^aw)czBTclqepL%0NH#j}8sf&+lAKwTq42j7wPwq%**84t+q!y04OJj=oQ5%<H3H
zu3Tf-0OluQP7nBfY{UQ=?U#&{{4&Km6(7`Lj!EmqDPYO~SW^c%y<piGC*^*6iVs2@
z%UhYGW5F-6PD$V)_9cFzPej=#RevR^v_q~>ERzX!SXn8ZJdMLof#DQ{VhC~UTr+)r
z?=HHhq)gPz9bg_Q@dxSG53i+LIR!0Pus}*dx%r_s18egxcQ5_)Z|~9WtL+?5JXuMt
z@hTTUpEt}TKrJ>N>mOFFq59e-(vP&Os;a1@q(pjSN=^)btJ6R*NWJ}i<aWDhXlRH=
zMgkm~VM)LgU1vD*q*PPDO0Hy&FDomfipol=sHh;9%QfkhHCZ<R*1^F*fQEfO>7^Ax
zHVE=EcZ>%E11HI}DU9$;9IUDS!T@$oH+W4AJioZOnDEXZ<%^rr89)ncSFT*y%1VVT
zETjQD<QVH~-)pbEmYLU9G9m*51N+&tuZv>~DZqO2b#``svUTg$E>V;cnwFufSFiq*
z^ZP!tm))}+8~`*pIC$>Jkt2sUY}nuz#VMinIv~*A-u|xN@4q09EvSI?<2`%!?0ao(
zZ5MX#+=*MSX`$5sw07;<lN?$*IK)Opkp%^?@VI#K;@+c2j~;yb>8HJ-I4v|A09dzf
z-8<dg-T2=zqQnA#E8?qHuO2>l@ZdYOwY6Oh4Go(Avy!emX#M^DAztU6S+QcpB3^Q>
zvR>#NSAJJl*YQJ#4*jmTxA#A<zWVBrsL}-88a#30#4s!W^wOnEi+Fn<Uv%h-qS*v2
z&3VcBG2{0g9UZ5(ZQC{=sx-rp3m-dn%=>S~nl)<%`68sAFFwlTOYgY=T!0P_4-b6)
z`R9M$w{PEeULl@&<Bd0TD<3d>mFC*Ld-r4a-+%uPtE#HL>U266&F23xgLK1-kO8;b
z{lDhs=D(aiefpCnOO|wR+_-UAG|>&ym&pvce$_`Gef0RUWy`)%R#x@^&l9(?A*$q?
zQW>}!&pEKBmv6Q3qGN~^-^FYE)=QTz9piQWzxep_qmMr7eg669P5mpwOlk(aD&KnR
zt=pF`U%sNey!<wfh#EFRIZxKMnPdc^{21qWUmy^0dpsUqfp=bNYHGT4;J|?!n>KCo
zZ{EB)BmYA(TUx<GRM-0T>x(%=og5K%j)Z&|0fYhGjF4pmvGQYHuXmIcAAJA)_eZ!o
z`0~pyM;aR&Z%*MYSg>Hhf&~i}ELgBGLqPO@V-xz=;-)X@00000NkvXXu0mjfURJzD

literal 0
HcmV?d00001

diff --git a/samples/react-dashboards/src/common/ChartHelper.ts b/samples/react-dashboards/src/common/ChartHelper.ts
index fec7b4071..33761de55 100644
--- a/samples/react-dashboards/src/common/ChartHelper.ts
+++ b/samples/react-dashboards/src/common/ChartHelper.ts
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { cloneDeep, merge, uniq } from "@microsoft/sp-lodash-subset";
 import { ChartType, PaletteGenerator } from "@pnp/spfx-controls-react";
-import { ChartData, ChartDataSets, ChartOptions, TimeUnit } from "chart.js";
 import stringsCommon from "CommonDasboardWebPartStrings";
+import { ChartData, ChartDataSets, ChartOptions, TimeUnit } from "chart.js";
 import moment from "moment";
 import { ColumnsInfo, DataTypesInfo } from "../components/InsightsChart/IInsightsChartProps";
 import ApiHelper from "./ApiHelper";
@@ -214,7 +214,6 @@ export default class ChartHelper {
                     }
                     dataSets.push(dataSet);
                 });
-                console.log(dataSets);
                 return {
                     datasets: dataSets
                 }
diff --git a/samples/react-dashboards/src/common/ComponentStyles.ts b/samples/react-dashboards/src/common/ComponentStyles.ts
index a08d9d3e3..926ea41e6 100644
--- a/samples/react-dashboards/src/common/ComponentStyles.ts
+++ b/samples/react-dashboards/src/common/ComponentStyles.ts
@@ -7,8 +7,12 @@ const theme = (process.env.NODE_ENV !== 'production')
     })
     : getTheme();
 
-const padding4px = theme.spacing.s2;
-const padding8px = theme.spacing.s1;
+const spacing4px = theme.spacing.s2;
+const spacing8px = theme.spacing.s1;
+const spacing16px = theme.spacing.m;
+const spacing20px = theme.spacing.l1;
+// const spacing32px = theme.spacing.l2;
+
 const fontSmall = theme.fonts.small.fontSize;
 const minWidth=280;
 
@@ -21,7 +25,9 @@ const getColorRGBA = (color: string, opacity: string | number): string => {
     return `rgba(${col.r},${col.g},${col.b},${opacity})`;
 }
 
-const stackTokens: IStackTokens = { childrenGap: `${padding8px} ${padding8px}` }; //rowGap columnGap 8px 4px
+const teamsPadding = `0px ${spacing16px} 0px ${spacing20px}`
+
+const stackTokens: IStackTokens = { childrenGap: `${spacing8px} ${spacing8px}` }; //rowGap columnGap 8px 4px
 const stackStylesMain: Partial<IStackStyles> = {
     root: {
         backgroundColor: 'inherit'
@@ -40,8 +46,8 @@ const stackStylesDatePicker: Partial<IStackStyles> = {
         backgroundColor: theme.palette.neutralQuaternary,
         paddingTop: 1,
         paddingBottom: 1,
-        paddingLeft: padding8px,
-        paddingRight: padding8px
+        paddingLeft: spacing8px,
+        paddingRight: spacing8px
     },
 }
 
@@ -62,17 +68,17 @@ const stackItemStyles100: Partial<IStackItemStyles> = {
 }
 const stackItemStyles50: Partial<IStackItemStyles> = {
     root: {
-        width: `calc(50% - ${padding8px})`,
+        width: `calc(50% - ${spacing8px})`,
     }
 }
 const stackItemStyles66: Partial<IStackItemStyles> = {
     root: {
-        width: `calc(60% - ${padding4px})`,
+        width: `calc(60% - ${spacing4px})`,
     }
 }
 const stackItemStyles33: Partial<IStackItemStyles> = {
     root: {
-        width: `calc(30% - ${padding4px})`,
+        width: `calc(30% - ${spacing4px})`,
     }
 }
 
@@ -95,7 +101,7 @@ const pivotStylesDashboard: Partial<IPivotStyles> = {
         flexFlow:'wrap'
     },
     itemContainer: {
-        padding: padding8px,
+        padding: spacing8px,
         paddingTop:0,
         backgroundColor: theme.palette.neutralTertiaryAlt
     }
@@ -184,20 +190,8 @@ const colorPickerStyles: Partial<IChoiceGroupStyles> = {
 }
 
 export {
-    theme,
-    stackTokens,
-    heatmapStyles,
-    datePickerStyles,
-    dashboardStyles,
-    stackStyles,
-    stackStylesMain,
-    shimmerStyleChart,
-    transparentTheme,
-    chartTheme,
-    disabledPickerStyle,
-    colorPickerStyles,
-    linkStyles,
-    getColorRGB,
-    getColorRGBA,
+    chartTheme, colorPickerStyles, dashboardStyles, datePickerStyles, disabledPickerStyle, getColorRGB,
+    getColorRGBA, heatmapStyles, linkStyles, shimmerStyleChart, stackStyles,
+    stackStylesMain, stackTokens, teamsPadding, theme, transparentTheme
 };
 
diff --git a/samples/react-dashboards/src/webparts/applicationInsightsLogs/ApplicationInsightsLogsWebPart.ts b/samples/react-dashboards/src/webparts/applicationInsightsLogs/ApplicationInsightsLogsWebPart.ts
index de68448de..d6fee138c 100644
--- a/samples/react-dashboards/src/webparts/applicationInsightsLogs/ApplicationInsightsLogsWebPart.ts
+++ b/samples/react-dashboards/src/webparts/applicationInsightsLogs/ApplicationInsightsLogsWebPart.ts
@@ -11,6 +11,7 @@ import { AppInsights, setLogger } from 'pnp-appinsights-listener';
 import * as React from 'react';
 import { ThemedPalette } from '../../common/ColorsHelper';
 import { CacheExpiration, IAppInsightsQuery, IAppInsightsWebPartProps } from '../../common/CommonProps';
+import { teamsPadding } from '../../common/ComponentStyles';
 import { ChartStyles, LayoutStyles, ListStyles } from '../../common/DashboardHelper';
 import ApplicationInsightsLogs from './components/ApplicationInsightsLogs';
 import { IApplicationInsightsLogsProps } from './components/IApplicationInsightsLogsProps';
@@ -39,6 +40,7 @@ export default class ApplicationInsightsLogsWebPart extends BaseClientSideWebPar
   }
 
   public render(): void {
+    let dashboard: React.ReactElement;
 
     const element: React.ReactElement<IApplicationInsightsLogsProps> = React.createElement(ApplicationInsightsLogs, {
       ...this.properties,
@@ -56,7 +58,14 @@ export default class ApplicationInsightsLogsWebPart extends BaseClientSideWebPar
       onConfigureTimePicker: this._onConfigureTimePicker,
       onConfigureLayoutSettings: this._onConfigureLayoutSettings,
     });
-    ReactDom.render(element, this.domElement);
+
+    if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
+      dashboard = React.createElement('div', { style: { padding: teamsPadding }}, element);
+    }
+    else{
+      dashboard=element
+    }
+    ReactDom.render(dashboard, this.domElement);
   }
   //#region WebPart Properties
   public _onPivotItemChange = (key: string): void => {
@@ -104,7 +113,6 @@ export default class ApplicationInsightsLogsWebPart extends BaseClientSideWebPar
         text: CacheExpiration[value as keyof typeof CacheExpiration]
       };
     });
-    console.log(this.properties.cacheDuration)
 
     return {
       pages: [
diff --git a/samples/react-dashboards/src/webparts/costInsightsDashboard/CostInsightsDashboardWebPart.ts b/samples/react-dashboards/src/webparts/costInsightsDashboard/CostInsightsDashboardWebPart.ts
index 059091769..a79a54cf4 100644
--- a/samples/react-dashboards/src/webparts/costInsightsDashboard/CostInsightsDashboardWebPart.ts
+++ b/samples/react-dashboards/src/webparts/costInsightsDashboard/CostInsightsDashboardWebPart.ts
@@ -8,6 +8,7 @@ import React from 'react';
 import * as ReactDom from 'react-dom';
 import { ThemedPalette } from '../../common/ColorsHelper';
 import { ICostManagementConfig, ICostManagementQuery, ICostManagementWebPartProps } from '../../common/CommonProps';
+import { teamsPadding } from '../../common/ComponentStyles';
 import { ChartStyles, LayoutStyles, ListStyles } from '../../common/DashboardHelper';
 import CostInsightsDashboard from './components/CostInsightsDashboard';
 import { ICostInsightsDashboardProps } from './components/ICostInsightsDashboardProps';
@@ -36,6 +37,8 @@ export default class CostInsightsWebPart extends BaseClientSideWebPart<ICostMana
   }
 
   public render(): void {
+    let dashboard: React.ReactElement;
+
     const element: React.ReactElement<ICostInsightsDashboardProps> = React.createElement(
       CostInsightsDashboard,
       {
@@ -55,7 +58,13 @@ export default class CostInsightsWebPart extends BaseClientSideWebPart<ICostMana
         onConfigureLayoutSettings: this._onConfigureLayoutSettings,
       }
     );
-    ReactDom.render(element, this.domElement);
+    if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
+      dashboard = React.createElement('div', { style: { padding: teamsPadding } }, element);
+    }
+    else {
+      dashboard = element
+    }
+    ReactDom.render(dashboard, this.domElement);
   }
   public _onPivotItemChange = (key: string): void => {
     this.properties.pivotKey = key